CSS Snippets

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:

.custom-alignment .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.