Hi, i’m using ‘full width’ rows, and there seems to be a global 30px padding/margin applied to the rows. Is there a way to change this to 50px (but keeping at 30px on mobile/under say 800px viewport)? I can’t seem to target/override this 30px with CSS alone.
This is in the inspector:
element.style {
margin-left: -30px;
margin-right: -30px;
padding-left: 30px;
padding-right: 30px;
on class=”siteorigin-panels-stretch panel-row-style panel-row-style-for-24-0″
Thanks
Hi Chris
Thanks for posting.
You can try adjusting the default layout values at SettingsPage BuilderLayout. See the Row/Widget Bottom Margin setting.
Andrew
Hi, thanks, I’ve tried that but it doesn’t control the LEFT and RIGHT padding. See the element.style 30px settings above that I see in inspector – it’s those I want to change.
Hi Chris
If the row is full-width, the negative margins should be dynamic based on your screen width. If you send a link to the page concerned I can take a closer look. Thanks.
Hi Andrew,
thanks,
here's screenshot showing the issue. the theme header i've customised to have a 50px L and R padding. the siteorigin "stretch rows" have
30px paddings L and R and i'd like to get these to be 50px to match
(when viewport is above 800px, below that i'd like to stick to 30px padding L and R to maximise space)
https://nsa25.tallhatdev.co.uk/paddingmargin-issue-siteorigin.png
live site dev is same as above without the png (just put in the co.uk part)
thanks chris
Thanks, Chris. As far as I’m aware the value in full-width situations is pulled from the theme which is setting 30px. Please try the following at AppearanceCustom CSS or CustomizeAdditional CSS or in your child theme stylesheet:
@media (max-width: 780px) { #main.site-main { padding-left: 50px !important padding-right: 50px !important; } }apologies, yes it was .site-main CSS in the theme. i had assumed it was siteorigin parameters. sorry about that!
many thanks Andrew
No worries at all; glad we could make progress.
Cheers
Andrew