Streaming live at 10am (PST)

Browser vs editor view very different

When I published this to the .io page all my settings were wilding different in the browser preview. I’m not sure what I did or if this is a bug I would love any type of help thank you!!!

What browser are you using to preview the staging site? Can you provide some screenshots to illustrate how it looks on your end?

I took a peek at both the Designer and the live site and they look identical to me:

thank you so much for your speedy response! I am using Chrome on a Mac.

I attached some images below…

It looks like it’s due to designing at a smaller width than what’s being shown in your browser. I’ve included two screenshots below, the first with the screen shrunk to 992px (the smallest end of the base breakpoint) as well as enlarged to 1625px (the largest size I can see without affecting the viewport scaling):

The first view looks totally appropriate to me, however the majority of your elements are position: absolute, meaning they won’t respect the space occupied by other elements on your canvas.

If you want to control the position of elements while still respecting the document flow, make sure you’re using relative positioning instead. Webflow has a great video on the differences between the available position properties that you can check out below:

wow thanks so much that helped a lot. I really need to go through and watch the whole Webflow U. I took a short coding class in college but only things here and there stuck haha.

I didn’t realize how big the breakpoint could go. Is there a breakpoint you usually design too? I switched to my monitor so am able to design at a much larger scale now :slight_smile:

Glad I could help out!

I design on a 27" 1080p monitor, so the 1625px resolution is what I design around, however this is just a larger size contained within the main “base” breakpoint which affects monitors 992px wide and up.

My recommended workflow is to get the site responding as you’d like across the four default breakpoints (base, tablet, mobile landscape, and mobile portrait) before deciding if you need to add any larger sizes to the project—only adding the larger breakpoints as necessary.

I very rarely add the larger breakpoints as I tend to set max-widths on my container elements, but it does help if you’re looking to fill larger screens with more columns, for example.