Hide Layout Grid by Size

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
harvillo
 
 
Posts: 40
Joined: Thu Apr 18, 2019 8:26 pm

Hide Layout Grid by Size

Post by harvillo »

I have a layout grid which I'd like to hide on on mobile devices. I'm fairly sure this can be dome with events, but I'm not sure which one.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Hide Layout Grid by Size

Post by crispy68 »

Are you using breakpoints? If so, just hide it in the object manager at the desired breakpoint.
harvillo
 
 
Posts: 40
Joined: Thu Apr 18, 2019 8:26 pm

Re: Hide Layout Grid by Size

Post by harvillo »

I’m using layout grid exclusively. No breakpoints.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Hide Layout Grid by Size

Post by crispy68 »

My guess would be to add a CSS media query to your page like such to hide the layout grid when a certain viewport is met:

Code: Select all

<style>
@media screen and (max-width: 480px) {
#NameOfYourLayoutGrid {display:none;}
}
</style>

Change the max-width to the width you want your layout grid to be hidden. Also, change the 'NameOfYourLayoutGrid' to whatever it is called in your project. As a note, I'm not where I can test this but in theory this should work.
harvillo
 
 
Posts: 40
Joined: Thu Apr 18, 2019 8:26 pm

Re: Hide Layout Grid by Size

Post by harvillo »

That’s perfect. I’m new to the software. I see a few ways to add the code. Would this be by using the html module? Should I insert Between body tags?
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Hide Layout Grid by Size

Post by crispy68 »

Simply insert the code by clicking on Page --> Page HTML --> Between <head></head> tags
harvillo
 
 
Posts: 40
Joined: Thu Apr 18, 2019 8:26 pm

Re: Hide Layout Grid by Size

Post by harvillo »

Worked perfectly. Thank you!!
Post Reply