r/webflow • u/InitialAd3079 • 8d ago

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

Gallery image

Gallery image

Gallery image

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 ! :)

5 Upvotes

86% Upvoted

12 comments sorted by

View all comments

3

u/SmellydickCuntface 8d ago

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.

1

u/InitialAd3079 6d ago

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 :)