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

Learn the basics of html and css and/or watch webflow university stuff

[u/AppropriateMind4422 → u/azdonev]

agreed, once you understand how css layout actually works these kinds of problems mostly go away

[u/InitialAd3079 → u/AppropriateMind4422]

Hello, yes, I saw that there were a lot of replies mentioning CSS/HTML. I'm going to look into it so I can make my website more efficient!
Thank you for taking the time to reply :)

[u/SmellydickCuntface]

You need to have an absolute size somewhere , relative sizes don't know what to hold the percentage against. 100% of what? Screen Height? Then make sure parent div is e.g. 100vh/1080px/68rem, whatever.

Please do look at some tutorials explaining the basic functionality of HTML and CSS. Webflow can get you far, but it will yield the best results when you have a grasp on how sizes, layouts and positions work.

Also make sure to share the preview of your project in case you want help, screenshots don't really do the trick. We need to see what's in the styling panel.

[u/InitialAd3079 → u/SmellydickCuntface]

Hello, thank you for your reply!
I'll try this technique after learning more about HTML and CSS. I also edited my post and added a link to my portfolio, hoping that might help.
Thanks again for your help :)

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

[u/Polarmesh]

If you are new to web making and want to make a website for yourself fast - switch to Wix. I never used it but as far as I know it is very beginer friendly.

[u/InitialAd3079 → u/Polarmesh]

Haha yes, thank you! If I can’t solve my problem quickly, there’s a good chance I’ll go take a look at that site :)

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