Responsive design and mobile previews

Documentation / Design and styling

Responsive design changes how content fits the available width. Native components provide responsive rules, but they cannot decide whether your text length, reading order, crop, or action labels are appropriate.

Review native layouts

Open the page preview and inspect it at desktop, tablet, and phone widths. Resizing the browser is a valid review method; do not assume every editing surface includes the same named device-preview controls.

Rows support one to four columns and stack at smaller widths. Their Tablet columns control can refine the intermediate arrangement. A four-column Row defaults to a two-column intermediate layout before reaching four columns on larger screens.

Review the order of cells when stacked. Keep related images and text together, and avoid layouts that only make sense through left-to-right visual pairing. Test long titles, multi-line Buttons, and uneven card content.

Review custom design separately

Custom CSS needs its own responsive rules. Scoped source does not automatically produce a complete mobile design. Custom scope review explicitly asks for desktop, tablet, and mobile inspection before publication.

Shared navigation requires special attention when a custom shell is active. Trusted navigation supplies data and interaction foundations, but its source CSS determines the responsive presentation. Deployment support and configuration must be checked before using advanced shell behavior.

Validate beyond a screenshot

Resize through intermediate widths, not only three fixed sizes. Scroll the whole page, operate menus with touch and keyboard, and check that content does not require unintended horizontal scrolling. Inspect image crops and ensure text stays readable when zoomed.

After saving, repeat the essential checks at the normal page address. An editor preview can include draft content or protected controls that visitors never see.

See Templates and reusable content for changes shared across pages.