Back to Community
Home / Community / Plugin → Page builder by siteorigin

Troubleshooting Common Mobile Layout Issues in Page Builder by SiteOrigin

44 threads Sep 16, 2025 Plugin → Page builder by siteorigin

Content

Mobile responsiveness is a cornerstone of modern web design, but it can sometimes be a source of frustration when using page builders. Users of the Page Builder by SiteOrigin plugin frequently encounter specific types of layout problems when viewing their sites on mobile devices. This guide compiles the most common mobile issues and their solutions, based on community discussions and resolutions.

Common Mobile Layout Problems and Their Fixes

Based on numerous user reports, here are the recurring mobile challenges and how to address them.

1. Rows or Columns Not Collapsing on Mobile

The Problem: A row with multiple columns (e.g., a 33.3-33.3-33.3 layout) appears correctly on desktop but stays in a horizontal row on mobile instead of stacking vertically.

The Solution: This is often a plugin settings issue. Navigate to Page Builder Settings > Responsive Layout and ensure the responsive design features are enabled. One user confirmed that a "not permitted responsive menu" in the plugin settings was the culprit, and enabling the correct option resolved it.

2. Unwanted Padding or Spacing on Mobile

The Problem: You set padding for the desktop view, but it also appears on mobile, or your theme adds excessive default bottom padding that you can't remove directly.

The Solution: The Page Builder by SiteOrigin team provides separate mobile padding controls. To prevent desktop padding from affecting mobile, you must explicitly set the mobile padding values. For example, if you want zero padding on mobile, enter 0 in the mobile padding fields within the row's style settings.

If your theme is adding default spacing, you can override it with custom CSS. Add the following code to Appearance > Custom CSS:

.panel-grid.panel-has-style > .panel-row-style {
    padding-top: 0;
    padding-bottom: 0;
}

3. Mobile Bottom Margin Not Working

The Problem: After an update, the specific "Mobile Bottom Margin" setting for a row stops functioning.

The Solution: This is a known bug that can sometimes be temporarily resolved by toggling a setting. Go to Settings > Page Builder > Layout and disable "Inline Styles." This can serve as a workaround until an official plugin update is released to permanently fix the issue.

4. Backgrounds or Elements Not Shrinking to Fit

The Problem: A widget with a colored background appears correctly on desktop but creates extra space or doesn't resize properly on mobile, often not fitting the content inside it.

The Solution: Try clearing the background color settings for the affected widget. Edit the widget, locate the background color setting, and click the "clear" button. If the problem persists only on certain widgets, check for any custom height or padding values that might need adjusting for the mobile layout specifically.

5. Full-Width Stretched Rows Not Working

The Problem: You set a row to "Full Width Stretched," but it doesn't break out of the theme's container and become truly full-width.

The Solution: This behavior is often controlled by your theme, not the page builder. The header, footer, and container widths are typically managed by the theme's template files. For assistance with making these elements full-width, you will need to contact your theme's support author, as they can provide the correct CSS or theme setting to achieve this.

General Troubleshooting Tips

  • Clear Caches: Always clear your browser cache and any caching plugins on your site after making changes. Old cached CSS files can make it seem like your fixes aren't working.
  • Check Theme Conflicts: Many layout issues, especially concerning padding, margins, and container widths, originate from the active theme. Test with a default WordPress theme (like Twenty Twenty-Four) to see if the problem persists.
  • Use Custom CSS: For fine-grained control over mobile styles, use the Custom CSS editor in your theme or a plugin. You can use media queries to target specific screen sizes. For example: 
    @media (max-width: 768px) {
        .your-custom-class {
            padding: 0 !important;
        }
    }

By methodically working through these common issues, you can resolve most mobile layout challenges and ensure your site looks great on any device.

Related Support Threads Support