A responsive layout looks wrong
Use this guide when content wraps, disappears, overlaps or appears in the wrong order at a particular screen width.
Capture the failing width
Record the viewport width and test immediately above and below the theme’s main responsive boundaries: 992 px, 768 px and 544 px. This shows whether the change is tied to a configured range rather than a particular device model.
Inspect from the outside in
- Edit the page in Page Builder → Backend Editor.
- Locate the affected element and its parent column and row.
- Check device visibility on the row, then the column, then the element.
- Review column width and offset values for the failing range.
- Check responsive padding and margin on each level.
- Review alignment, background and minimum-height settings that can change at smaller widths.
- Save, update and retest at the exact recorded width.
A hidden parent hides all of its children. Extra spacing on both a row and its child can also combine into an unexpectedly large gap.
Check order and available space
Responsive columns follow their document source order unless a supported layout control changes the presentation. If mobile content appears in the wrong sequence, correct the builder order rather than relying on visual desktop placement.
Sticky headers, fixed controls, contact docks and browser UI reduce usable space. Test the page with the mobile menu closed and with the on-screen keyboard dismissed before changing the layout.
Distinguish layout from stale CSS
If the builder values are correct but the public URL still uses the old arrangement:
- Update the page to refresh page-specific styles.
- Purge the page cache and CDN cache.
- Retest in a private window.
- Regenerate site-wide assets only if several pages show the same stale responsive rule.
Expected result
The layout changes at the intended boundary, remains readable between boundaries and preserves a logical source order for keyboard and assistive-technology users.
If overlap remains
Temporarily remove only the affected element’s fixed height, negative margin or offset. If the overlap disappears, restore values one at a time to find the conflicting constraint. Avoid compensating for it with unrelated global spacing.