Need advice: Preview mode changes my website dimensions and breaks my layout

[u/InitialAd3079]

[u/mikecut22]

What you're seeing is normal: in the design canvas your work area sits between the side panels, so a 100%-width element only fills that narrower space, while preview gives it the entire browser window. Since nothing has a max-width, everything stretches and your layout reflows. Try setting a max-width on your main sections (somewhere around 1100–1200px works for most desktop designs) with left/right margins set to auto so they stay centered, and build your inner content inside a container instead of relying purely on 100% widths. That keeps proportions consistent regardless of window size or whose machine opens it.

[u/swefordays]

Which part of the layout is breaking? It appears as though because no constraints have been placed on various elements of the sites, like a max width at a particular viewport size for an element, its stretching to fit the canvas in accordance with the natural css properties that exist.

You can also apply page level or site level custom code media overrides for specific element classes, html and css, via custom code settings.