Below you’ll find CSS snippets to achieve small tasks that might not be included in Page Builder settings. These snippets can be added to AppearanceCustom CSS if using SiteOrigin CSS, CustomizeAdditional CSS or your child theme style.css
file.
Center All Page Builder Widget Titles
.panel-grid-column .widget-title { text-align: center; }
If you’d like to restrict the above rule to a particular page, please, see Unique Page Styling with Custom CSS Body Classes.
Center Align Column Content While Stretching the Column Background
To stretch column background images or colors, edit the row, open the Layout section, and set column Vertical Alignment to Stretch. The column content will be top-aligned. To vertically center align the content within a column:
– Edit the row and select the column you’d like to center vertically.
– Note the column Styles panel that appears in the right column.
– Open the Attributes section and insert the following in the CSS Declarations field.
align-items: center display: flex
Bottom Align the Third Widget in Each Column
Edit the parent row and add the following to the AttributesRow Class field:
custom-alignment
At AppearanceCustom CSS, add the following:
.panel-grid-cell .widget:nth-child(3) { margin-top: auto; }
Finally, edit the parent row, click on each column and insert the following in the AttributesCSS Declarations field:
flex: 1 display: flex flex-direction: column
Target Full Width Rows
div.siteorigin-panels-stretch[data-stretch-type="full"] { /* CSS declarations here */ }
Target Full Width Stretched Rows
div.siteorigin-panels-stretch[data-stretch-type="full-stretched"] { /* CSS declarations here */ }
Display Empty Columns on Mobile
By default empty columns are hidden on mobile. If you’ve added a background image to a column and would like to display it on mobile you can use:
@media (max-width: 768px) { .panel-grid-cell-empty { display: block !important; } .panel-grid-cell-empty .panel-cell-style { min-height: 300px; } }
Adjust the min-height
value as required or replace the min-height: 300px declaration with aspect-ratio: 4 / 3
in which case the aspect ratio value can be adjusted as required. Adjust the 768px
breakpoint to match the value you’ve set at SettingsPage BuilderLayoutMobile Width.