Check the layout at each size
Start with a saved page in Studio. Select the container or element responsible for the area you want to change. Adjust its layout controls, then switch viewport sizes to check whether the content still fits and remains readable.
Work from the outer layout inward. A parent container's width, alignment or spacing can explain why several children appear misplaced. Fixing the parent is often clearer than compensating on each child.
Create a viewport range
- Open Design and find Viewport ranges.
- Choose Add viewport range, name the custom breakpoint range and enter its minimum and optional maximum width.
- Save the range and use its Preview control to check a width inside it. The standard phone, tablet and desktop ranges stay fixed.
These named ranges can be reused in Conditions across the site. Removing a custom range leaves conditions that referenced it unmatched until you choose another range.
Hide or show an element with a condition
Select the element and open Conditions. Add a condition, then set When to Viewport range and choose the range. Select Inside this range or Outside this range according to the result you need.
For conditional visibility, set When matched to Visible or Hidden and review Otherwise. For example, hide a long decorative section inside the phone range and leave it visible otherwise. Preview widths on both sides of the breakpoint. When conditions overlap, the last rule wins, so inspect their order before adding another one.
When displaying collection content, inspect records with short text, long text and missing optional fields. A condition that hides an empty field should leave the surrounding layout coherent.
Review custom additions
Custom CSS, widgets and embeds require the corresponding editing permission. Keep the change scoped to the component or page where it is needed, and check how it affects keyboard access and narrow screens. External services can have their own costs and terms.
Save the result, preview the affected pages and publish through the site's normal review process. For actions that respond to a click or other trigger, continue with Studio workflows.