CSS Snippets

These CSS snippets do small tasks that Page Builder settings don’t cover. Add them at AppearanceCustom CSS if you use SiteOrigin CSS, at AppearanceCustomizeAdditional CSS, or in your child theme’s style.css file.

Center All Page Builder Widget Titles

.panel-grid-cell .widget-title {
	text-align: center;
}

This rule uses the widget-title class from the default Widget Title HTML setting. To apply it to one page only, see Unique Page Styling with Custom CSS Body Classes.

Center 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 is then aligned to the top. To center the content vertically in a column:

1. Edit the row and select the column you want to center.
2. In the column’s styles sidebar, such as Column 1 Styles, open the Attributes section.
3. Add the following to the CSS Declarations field.

display: flex
flex-direction: column
justify-content: center

Bottom Align the Third Widget in Each Column

1. Edit the row. In the Attributes section, add custom-alignment to the Row Class field.
2. In the Layout section, set Column Vertical Alignment to Stretch.
3. Select each column in turn, and add the following to its Attributes > CSS Declarations field:

display: flex
flex-direction: column

Then add this CSS:

.custom-alignment .panel-grid-cell .so-panel:nth-child(3 of .so-panel) {
	margin-top: auto;
}

The third widget, and any widgets after it, move to the bottom of the 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-width-stretch"] {
/* CSS declarations here */
}

Display Empty Columns on Mobile

By default, Page Builder hides empty columns on mobile. To show an empty column that has a background image or color, enable SettingsPage BuilderLayoutDisplay Empty Columns With Background.

An empty column has no content to give it height on mobile. To give it a height:

@media (max-width: 780px) {
	.panel-grid-cell-empty .panel-cell-style {
		min-height: 300px;
	}
}

Adjust the min-height value as needed. Or replace min-height: 300px with aspect-ratio: 4 / 3, and adjust the aspect ratio as needed. 780px is the default Mobile Width. If you changed SettingsPage BuilderLayoutMobile Width, use that value.