Canvas and preview mode not matching

[mlermant (Marina Lermant)]

Hello Webflow community!
I’m brand new here and trying to figure out how it all works, starting with changing up a template. I’ve searched all day for an answer to a seemingly simple question but can’t figure it out. Basically, when I’m working in the canvas mode and get things looking how I want, I click preview and things get shifted and out of whack. I am viewing them at the same adjusted size of 1260 px so I don’t know why this is happening or how to fix it as I want to be designing in a view that will be accurate. My formatting also isn’t translating well to mobile view so I need to figure that out. Thank you for any and all help.

Here is my site Read-Only: Webflow - Seamless: responsible fashion with respect for the landscape

[mikeyevin]

Welcome to the community @mlermant!

The reason you’re seeing a difference is due to the way Webflow presents the “pseudo” 1260px canvas and it really is only used to estimate how a design would look on a larger resolution. In fact, you can actually see how it distorts the layout if you hover over the edge of the canvas to the left of the toolbar edge (as long as it’s showing at less than 100%—you’ll see a left-right arrow cursor) and click/drag towards the closest edge.

This will decrease the zoom percentage and give you an idea of how elements relate as the browser width changes. Since the approximation only takes into consideration the width of the browser, the design may not match exactly to how a larger display would actually look.

Going forward, even the Preview should be considered an estimate and all actually testing is recommended within an actual browser window on the desired screen size

[mlermant (Marina Lermant)]

Hi @mikeyevin, thanks for the fast reply. I had moved the canvas with the edge as you mentioned and saw those changes. Since everything is kind of an estimate, is there no way to perfectly match the screens or design on the canvas in a way that will be 100% accurate to a full screen mode? I was wanting my design to match perfectly with where I aligned things so not being able to get a real representation was making things hard. Thanks for the help.

[mikeyevin]

The estimate comes into play mainly with the height so while it may not be super accurate to real world situations you should be able to get things responding in a way that works across all sizes.

Since you’ve got the Hero section taking up 100VH but offsetting it by a pixel value you’re going to see a different interpretation as the viewport resolution changes. Instead of using pixels, use dynamic units (%, VW, VH) for both the size of your hero background element and it’s offsets—something like the following:

[mlermant (Marina Lermant)]

Ok, I’ve made some adjustments but it is still not lining up entirely. I think I need to continue playing around with the values and using dynamic units. Thanks for checking it out for me!