This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Site-Origin Layout Builder – mobile friendly?

Open 4 replies pluginplugin-page-builder
Mitzi Reaugh
10 years ago · Last reply by Andrew Misplon 10 years ago

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!

URL: http://marsmerize.com/home_test/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. Andrew Misplon Staff 10 years, 5 months ago

    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:

    <div style="margin-left: 200px;margin-right: 200px;padding-top: 40px;" class="panel-widget-style">

    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.

  2. Mitzi Reaugh 10 years, 5 months ago

    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

  3. Andrew Misplon Staff 10 years, 5 months ago

    That’s it. Just enter

    custom-headline

    With no period in front of the class name.

  4. Andrew Misplon Staff 10 years, 5 months ago

    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

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread