Live Preview and Responsive Viewports

Step 1: Understand the Preview
The center of Builder Studio is an isolated preview document, not a decorative picture of the page. It loads the current draft layout with the frontend styles and scripts needed by the page. Make one change at a time and wait for the preview to settle before deciding whether the result is correct.

Step 2: Inspect a Tablet Preset
Choose Tablets, then select a useful preset. Check content order, columns, gutters, typography, buttons, media, menus, forms, and any interactive module. Device presets help expose breakpoint mistakes, but they do not replace testing on a real browser at the exact boundary widths used by the design.

Step 3: Inspect a Phone Preset
Switch to Mobiles and review the complete page at a narrow width. Look for clipped content, tiny controls, open menu panels, missing media, horizontal drift, and awkward reading order. Correct the mobile-specific value in the element or parent layout instead of shrinking the entire page.

Step 4: Save Only After Parity
Use Page Settings and the save state to confirm whether you are working with an unsaved draft or public content. Check interactive behavior in Studio, save, then open the public URL in a separate session. The layout, typography, spacing, radius, colors, and module output should agree in both places.
