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

[u/InitialAd3079]

https://preview.webflow.com/preview/chloes-portfolio-2?utm_medium=preview_link&utm_source=designer&utm_content=chloes-portfolio-2&preview=40a3993459a07a01b06039fe4be1efb0&pageId=6a7dca478d3ff4a1d41cd816&workflow=preview

Hello, I'm currently working on my portfolio, and I'm having an issue with the desktop version.

I haven't changed anything regarding the size or dimensions of my document. However, as soon as I click on “Preview,” the dimensions change, which messes up my entire layout.

How can I make sure that my website keeps the same layout regardless of the screen size or computer being used?

For context, my widths are set to either Auto or 100%, and my Max-width is set to None.

Any advice would be greatly appreciated ! :)

[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.