Streaming live at 10am (PST)

Breakpoints are a complete mess

I recently added the optional breakpoint sizes to my website: 1279 px, 1440 px, and 1920 px. When I go into the editor, the actual display size is extremely inconsistent. Sometimes when I click on a breakpoint it will display as the correct size, then I’ll click off it and on again and the size will be different. See photos.

Does anyone know why this is happening? I feel like I will never again be able to have a consistent display when editing my website.Capture 2 Capture

I feel your pain. Unfortunately I don’t have an answer but would like to know how this gets resolved. My breakpoints for smaller mobile devices is a hot mess.

The size the Designer displays your site on any particular breakpoint depends on your browser window size, however it’s worth noting that any change within a given breakpoint—whether it’s the high or low end—will affect all sizes within that breakpoint. When you’re in the second largest breakpoint you’re actually editing all styles between 1440px and 1919px.

You can change the size of the preview window in any breakpoint by hovering over the edge of the Designer workspace (between the two UI panels) and dragging left/right, or manually by clicking on the PX value in the top bar and changing the size as needed. If your browser can’t display the amount of pixels due to the available screen size, it will change the zoom level and show a number other than 100%.

I can’t say for sure why you’re seeing different numbers every time, it’s possible it could be referencing the last size it was on within a given breakpoint or you could be using the docked Navigator panel (which would reduce the horizontal width depending on it’s size) but I’d recommend paying more attention to the breakpoint level as opposed to the actual pixel value :+1:

This helped me understand breakpoints quite a bit better. Thank you. When I added the new breakpoints it changed my “default” base view to a smaller size, so that will take some getting used to. But I read that it’s better to design in a smaller window anyway because changes scale upward better than they scale down, so maybe it’s for the best.

Glad I could help out! The breakpoints in Webflow work a bit differently than traditional web development, so it can be a bit tricky if you have an existing knowledge of how it’s done outside of Webflow.

I think it helps to keep in mind that your “base” breakpoint is essentially the way the site will look across all breakpoints—both smaller and larger—until any changes are made to breakpoints other than that one. Changes cascade outward in both directions, so when you add the larger breakpoints the styles on them don’t actually change from the “base” breakpoint until you make some sort of style change. This is why I typically only add a larger size when I feel like I need the site to respond differently on larger screens as opposed to adding them all at once.

If you ever want a larger breakpoint to respond like the “base” breakpoint, just clear any new styles (shown with a blue label) and it will “fall back” to how it looked before you added the larger breakpoints and made style changes. This works exactly the same with the smaller breakpoints, just cascading in the opposite direction :+1: