Hi,
I have read all the other posts on this issue, and tried the solutions to no avail.
This is a bit of an issue all over, but particularly on these mobile pages
http://insurance4footballers.com.au/mobile-videos/
[when viewed on mobile there is a large space between videos]
Have tried this in Custom CSS –
.wp-video[style] { height: auto !important; }– but doesn’t workhttp://insurance4footballers.com.au/mobile-calculator/
Space between Quote button and disclaimer, which is in a row below.
Have tried this in custom CSS…
/* Set Page Builder bottom margin */
.panel-grid-cell {
margin-bottom: 0px !important;
}
..and this in individual row CSS, as really only want to apply it to some rows…
.panel-row-style-content-standard.panel-row-style {
padding-bottom: 0px !important;
}
SO the question is how to reduce padding above or below a row, but not all the way round.
And whether to put it in the Custom CSS, or in the row CSS, or the widget CSS. Example code would be most appreciated.
Thanks!
Hi GailyD
The second and third CSS selector you’ve pasted are no longer applicable, the first selector in particular refers to an old Page Builder bug.
Looking at your source code it looks like you’re apply a property of:
To each row. You can find this CSS that’s been added by clicking on the wrench icon on the far right of any of those rows and then clicking Edit row > Attributes.
You can adjust padding by changing the style you’ve added there. You could also add a row class, any name that works for you:
Then under Appearance > Custom CSS you can target that class:
.row-padding { padding-top: 50px; padding-bottom: 50px; }Notice how there is no starting period when I enter the class name in the Page Builder row interface but there is when I target that class under Appearance > Custom CSS.