I’ve just started using webflow and it’s super awesome. Needing a bit of time though to get adapted to it.
I have a questio now regarding the differenz sizes of desktop screens and internet browsers. How can I make my editor’s view to be seen the same like the viewer on the page?
For example in my editor’s view the page looks like this:
So it stretches things for every screen / web browser ratio if I’m not mistaken.
I know it’s a simple and stupid question but I’m just new into this web design stuff.
Welcome to Webflow and the Webflow Forums, a great community here, and a good place to get the help you need.
This is a common experience when you first start using Webflow.
Basically it is due to the viewport size of the designer is different from the published site screen size.
Depending on how you construct your page if you are using absolute position, margins /padding to ‘put things in the right place’, your site will always look different from the designer than the preview or published page.
If you provide a ‘Read-Only’ link to your project, then the community will be able to assist you with specifics.
Yes, I’ve made some research and watched some tutorials but it’s quite difficult tho. Is it possible to set the dimensions to have a preview of the size ratios and then fix it with ‘vh’ or ‘%’ scales? So you have the same ratio in preview and on every other screen. It’s just difficult to upload an image without having ‘h x w px’ information.
I just wanted to add something that you may find useful. At the top of your Designer, you’ll see an option to simulate different viewport sizes… the Designer view will automatically zoom out if you set it to a size larger than your physical viewport size.
You might find this handy if you are designing on a smaller monitor as you could still see what your design looks like on a viewport width of, for instance, 3440px
Yes I’ve seen that there are different viepowort sizes, didn’t recognize the percentage and px numbers though! Thanks for that inormation, might be very useful!
