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].
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.
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
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.
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; }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
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.
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.
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
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.
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.
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