Home>Support>Modify Row Padding

Modify Row Padding

In SiteOrigin Page Builder & Vantage the panels are set with their padding to 35px which is an embedded style.

Class:
siteorigin-panels-stretch panel-row-style-full-width panel-row-style

Embedded css:
margin-left: -35px;
margin-right: -35px;
padding-left: 35px;
padding-right: 35px;
border-left: 0px;
border-right: 0px;

I’d like to decrease the padding left and right, it seems a lot.

I’ve looked in the Layout settings but I can’t find an option for it there.

Thanks.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 1 month, 5 days ago Andrew Misplon Hi, I Work Here

    Hi Chris

    Thanks for reaching out.

    You can perhaps check your defaults at SettingsPage BuilderLayout. If you don’t mind sharing a link to the page concerned, then I’d be happy to take a look at the row specifics and, hopefully, get back to you with a more precise reply.

    Cheers

    Andrew

  2. 1 month, 3 days ago chrisoliver90

    Hi Andrew,
    I do have a setting in there for Row/Widget Bottom Margin which is 35px but that doesn’t seem to affect the row whatever I change it to.
    It seems that the margin and padding for the row is dynamically set (decreases with window size) then at resolutions of 1150px and below it becomes 35px.

    See Screenshot
    You can view the site at: https://brogansian.co.uk/
    The password to access is “dogs”

    You’ll see on every page that it has the same issue.
    I should note than I am using a Child Theme of Vantage but I haven’t set this.

    Thank you.

  3. 1 month, 2 days ago Andrew Misplon Hi, I Work Here

    Hi Chris

    Thanks for the detailed feedback. If you don’t mind editing your child theme stylesheet, you can adjust the padding value. If you aren’t using FTP, you can head over to AppearanceTheme Editor and edit the style.css file of the activated theme. Search for the following:

    .layout-full .split-row.panel-row-style.panel-row-style-full-width {
    	/*padding: 45px 1000px 45px 1000px;*/
    	padding: 35px 1000px 35px 1000px;
    }
  4. 1 month, 2 days ago chrisoliver90

    Hi Andrew,
    I actually had that code in myself for debugging.
    What you will notice is whatever padding left and right that is specified for the element there, unless the !important declaration is used, it will obviously prioritise the embedded style.
    If you inspect the element you will see the embedded.style has:

        margin-left:
        margin-right:
        padding-left:
        padding-right:
        border-left:
        border-right:

    The margins and padding change as you increase/decrease browser width. When you get down to 1150px and below, it sticks to 35px padding. Where is this set? Possibly in JavaScript?
    This happens with Vantage theme applied out of the box, it is not related to the child theme.

    Thank you,
    Chris

  5. 1 month, 2 days ago chrisoliver90

    Note that in the style you mentioned editing – this has a padding of 1000px left and right, yet it is clearly still only applying the 35px left and right that is set inline.

  6. 1 month, 2 days ago Andrew Misplon Hi, I Work Here

    Apologies; I’m with you now. I didn’t see the -35px because it’s dependent on the screen size – as you rightly pointed out.

    Page Builder uses JavaScript for full-width stretched rows. JS allows Page Builder to jump out of any theme’s container.

    Sorry again for the slow uptake here. I’m with you; let me get back to you on this ASAP.

  7. 1 month, 2 days ago chrisoliver90

    Hi Andrew,

    Thank you. I assumed it must be Javascript. The functionality makes sense but the issue is that is stops at a minimum of 35px, which is quite a lot of padding on a mobile for me. I have this theme applied on another of my projects and it is the same there, though I’m certain it wasn’t until fairly recently.
    I thought there would be an option to set the padding size at mobile considering how customizable Vantage & Page Builder are but I did not find one.

    Thanks for looking into this.
    Chris

  8. 1 month, 2 days ago Andrew Misplon Hi, I Work Here

    Hi Chris

    Thanks for hanging in there.

    I chatted with Alex here at SiteOrigin. He had the following feedback for us:

    The 35px value isn’t standard and will depend on that the space between the edge of the page and the content area set by the theme.
    https://github.com/siteorigin/siteorigin-panels/blob/develop/js/styling.js#L29-L30

    Please, try the following in your child theme or preferred Custom CSS location:

    @media (max-width: 780px) {
    	#main {
    		padding-right: 15px;
    		padding-left: 15px;
    	}
    }

    Does that help? We could make the rule page specific if that were more appropriate.

  9. 4 days, 5 hours ago chrisoliver90

    Hi Andrew,
    Sorry for the delay.
    Unfortunately that solution does not help as that modifies the padding on the main div.
    The issue is with the panel padding being dynamically set.

    The following style is embedded within the panels

    margin-left: -35px;
    margin-right: -35px;
    padding-left: 35px;
    padding-right: 35px;
    border-left: 0px;
    border-right: 0px;

    I found no solution for this. I have just decreased the content in my div so it doesn’t wrap on mobile.
    Thank you.

  10. 4 days, 3 hours ago Andrew Misplon Hi, I Work Here

    Hi Chris

    Glad to see you’re making progress.

    I’ve added an example of the Custom CSS change I suggested here https://demo.siteorigin.com/vantage/sandbox/. If my example page is working as you’d like it to, please, add the rule to your site and I’ll take a look at the problem in action.

    Cheers

    Andrew

Please log in to post on our forums. Signing up is free.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More