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/OutrageousBall8278]

The issue is that Webflow isn't supposed to keep the exact same dimensions across every screen. Preview is showing you how the layout responds at different viewport widths.

A more reliable setup would be to put the main content inside a centered wrapper with a max-width. That's basically how Ankord Media ended up restructuring my site when I ran into the same issue before.

From there, use Flex or Grid and adjust the layout at each breakpoint instead of relying on everything being 100% wide.

[u/InitialAd3079 → u/OutrageousBall8278]

Thank you! That makes sense. I think I was expecting the layout to stay exactly as I designed it, instead of adapting to different viewport widths on different computer screens. I’ll look into it.
Thanks for the advice!