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: 18
Joined: Thu Apr 18, 2019 8:26 pm

Hide Layout Grid by Size

Post by harvillo » Thu Apr 25, 2019 9:53 pm

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: 558
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Hide Layout Grid by Size

Post by crispy68 » Thu Apr 25, 2019 10:09 pm

Are you using breakpoints? If so, just hide it in the object manager at the desired breakpoint.

harvillo
 
 
Posts: 18
Joined: Thu Apr 18, 2019 8:26 pm

Re: Hide Layout Grid by Size

Post by harvillo » Fri Apr 26, 2019 3:37 pm

I’m using layout grid exclusively. No breakpoints.

User avatar
crispy68
 
 
Posts: 558
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Hide Layout Grid by Size

Post by crispy68 » Fri Apr 26, 2019 3:55 pm

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: 18
Joined: Thu Apr 18, 2019 8:26 pm

Re: Hide Layout Grid by Size

Post by harvillo » Sat Apr 27, 2019 2:47 am

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: 558
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Hide Layout Grid by Size

Post by crispy68 » Sat Apr 27, 2019 4:26 am

Simply insert the code by clicking on Page --> Page HTML --> Between <head></head> tags

harvillo
 
 
Posts: 18
Joined: Thu Apr 18, 2019 8:26 pm

Re: Hide Layout Grid by Size

Post by harvillo » Mon Apr 29, 2019 2:47 pm

Worked perfectly. Thank you!!

Post Reply