Difficulty with Row Attributes CSS

Resolved 2 replies developer plugin plugin-page-builder

9 years ago · Last reply by blacktankdesign 9 years ago

Firstly, let me say how fabulous Page Builder is. I use it on most of our sites and it really makes site building so much easier. So thank you!!

I am having trouble, though, figuring out the CSS attribute section of the rows. I followed your tutorial but I’m just not able to make it work.

The site in development is here using Vantage theme:
http://5e9.238.myftpupload.com/

My very ugly css on the panel grid cells is currently directed at each individual page as:

#pg-54-0, #pg-54-1, #pg-54-2, #pl-54 .panel-grid-cell .so-panel {
margin-bottom: 5px;
}
#pg-54-3, #pl-54 .panel-grid-cell .so-panel:last-child {
margin-bottom: 35px;
}
#pl-484 .panel-grid-cell .so-panel {
margin-bottom: 5px;
}
#pg-484-0, #pl-484 .panel-grid-cell .so-panel:last-child {
margin-bottom: 35px;
}
#pl-486 .panel-grid-cell .so-panel {
margin-bottom: 5px;
}
#pg-486-0, #pl-486 .panel-grid-cell .so-panel:last-child {
margin-bottom: 35px;
}
#pl-493 .panel-grid-cell .so-panel {
margin-bottom: 5px;
}
#pg-493-0, #pl-493 .panel-grid-cell .so-panel:last-child {
margin-bottom: 35px;
}
#pl-495 .panel-grid-cell .so-panel {
margin-bottom: 5px;
}
#pg-495-0, #pl-495 .panel-grid-cell .so-panel:last-child {
margin-bottom: 35px;
}
#pl-488 .panel-grid-cell .so-panel {
margin-bottom: 5px;
}
#pg-488-0, #pl-488 .panel-grid-cell .so-panel:last-child {
margin-bottom: 35px;
}
#pl-490 .panel-grid-cell .so-panel {
margin-bottom: 5px;
}

I’m sure there must be a simpler way to do this with the CSS attribute of the row but I just can’t seem to figure it out!

Any help will be greatly appreciated.

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

Need fast email support? Get SiteOrigin Premium

Replies

Alex S Staff 9 years, 4 months ago
Hi Blacktankdesign,
Thank you for the kind words! :)
The Attribute CSS Styles field is actually only for inline styles so, for the most part, it won’t do what you’re after.
To do what you’re after you’ll want to adjust the global Row Bottom Margin and add some custom CSS.
Adjust Global Row Bottom Margin
You can also globally adjust the row bottom margin by navigating to WP AdminSettingsPage Builder, then open the Layout settings group and adjust the Row Bottom Margin.
Last widget in row bottom margin
Please navigate to WP AdminAppearanceCustom CSS and add the following CSS:
```
.panel-grid-cell .so-panel:last-child {
    margin-bottom: 35px !important;
}
```
You might also need to install the SiteOrigin CSS Editor.
blacktankdesign 9 years, 3 months ago
Thank you so much!
I had completely forgotten about this section in the Administration. LOL
This solves more than a few of the problems I’ve been having!

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.