Website designer and preview not the same?


I’m new to Webflow and relatively new to web design all together and I’ve run into an issue I can’t resolve myself.

My design in the builder doesn’t look like the result I get when I preview the page. It’s stumped me. I’ve tried reading other posts here but nothing that directly relates.

I’ll attach 2 images below to help you see, plus my read only.

Here is my site Read-Only: Webflow -

Hey @dazzen - and welcome :grinning:
Your WF preview and the published site show some discrepancies, try to keep them updated together, this eases troubleshooting for us!

I’ve notices that you rarely (or not at all) define widths / heights in your layout and tend to use more margins and paddings to achieve your desired looks. If you have a lax style of defining those, stuff will will be highly dependent on the width and height of the viewport. Now if you remove the editor panels from the editor (eg. viewing your site in the editor preview OR published site) the increased width of your viewport could be causing this “stumpedness”. Try giving the elements that contain your components explicit dimensions (use relative length units for responsive designs) and also use relative length units for spacing via padding or margins that need to shrink or grow.

Let me know what you think!

1 Like

Seems like it was the pre-made layout I dragged across. I’ve since remade the layout from scratch and it’s working as it should. Thanks for your assistance though @RDaneelOliwav - I’ll be sure to implement what you’ve suggested going forward.

1 Like