Hey everyone. I’m having a problem where the designer and the preview look very different. In the designer the layouts all overlap and things don’t line up properly but when I hit preview it all looks fine. So I have to check preview all the time to make sure everything is right. What is going on and how can I fix it? I’ve watched all the Webflow tutorials and have made one Webflow website before, my portfolio website.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey @Atticus , this could be because your Designer Canvas would be set at a lower width and when you preview it, the canvas switches to a bigger width.
Designer Width @ 1558 px
Preview @ 2005 px
Hi, thanks for the reply! I didn’t actually know you could change the width. It seems to fix the issue but only temporarily because the designer width switches back to what it was before after I exit out of preview mode.
That would be the point of the different widths. It is trying to showcase based on your design how the content would look on a 13" Macbook vs a 28" 4K Monitor at the Desktop Breakpoint.
Some principles you could follow would be to use a fixed width div container set at max width of of say 1300 px with margins auto so it centers within the section. All your main content would be placed within this.
If you want to have different design structures at different viewports, you can also add a breakpoint. However, I am not a big fan of this as it can get cumbersome too quickly so I would stick with the first option.
I would also recommend watching this video: How To Structure Websites Efficiently With Webflow - YouTube to give you some idea on structuring your project.
Ok, thanks. You’ve helped a lot! Previously I was only using the buttons for desktop, tablet, mobile views etc and then using the handle on the side of the preview to drag the view port to different widths. I never realised you could type in an exact width. I still wish you could change the default width it goes to in the designer, but I understand what you mean. Thanks for your help!
I remember watching that video many months ago but I’ll give it another watch.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
