Hide Layout Grid by Size
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
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
Hide Layout Grid by Size
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.
Re: Hide Layout Grid by Size
Are you using breakpoints? If so, just hide it in the object manager at the desired breakpoint.
Re: Hide Layout Grid by Size
I’m using layout grid exclusively. No breakpoints.
Re: Hide Layout Grid by Size
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:
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.
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.
Re: Hide Layout Grid by Size
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?
Re: Hide Layout Grid by Size
Simply insert the code by clicking on Page --> Page HTML --> Between <head></head> tags
Re: Hide Layout Grid by Size
Worked perfectly. Thank you!!