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.

Adjust the Cell Bottom Margin for Mobile

Your mobile breakpoint is set from SettingsPage BuilderLayout: Mobile Width. When the mobile width is reached, row cells will collapse vertically if configured to do so. The bottom margin applied to each cell is editable from SettingsPage BuilderLayout: Row/Widget Bottom Margin. However, this setting will impact all pages and all resolutions. To adjust the cell bottom margin for mobile only, the following can be used and edited.

@media (max-width: 780px) {
	.panel-grid .panel-grid-cell {
		margin-bottom: 30px !important;
	}
	.panel-grid .panel-row-style > div:last-of-type {
		margin-bottom: 0 !important;
	}
}

Center all Page Builder Widget Titles

.panel-grid-cell .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.