Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi
I’m using the Layout Builder tool but in my own custom designed theme. is there anyway to make the results more mobile friendly? The mobile experience has a ton of white space, the images aren’t resizing, etc. Any suggestions? I tried looking in the forums but I mostly found postings about vantage premium
thank you!
Hi Mitzi
Thanks for reaching out.
Page Builder looks to be running responsively as per usual. Fixing these last few issues will come down to CSS. Here is a quick example:
That’s inline CSS you’ve inserted into the first Headline widget. Those margins don’t work on mobile. You’d need to rather add a CSS class to that widget via the Attributes tab and then wrap those styles in a media query:
/* Page Builder Styles */ @media (min-width: 680px) { .custom-headline { margin-right: 200px; margin-left: 200px; padding-top: 40px; } }Using your browser’s developer extension you’d need to work through each page as I’ve done with that first widget and figure out where the unnecessary padding is coming from.
thank you
In the attributes tab on pagebuilder to do i simply enter:
custom-headline
?
I’ve worked in html/css before but i’m not clear how to implement the attributes in pagebuilder widget class
thanks
That’s it. Just enter
With no period in front of the class name.
For more on how row attributes are applied, please, see my run through here:
Thread: How do Page Builder row attributes work – row class, cell class and CSS styles