Streaming live at 10am (PST)

Breakpoints: Why breaking where they do?

Hi,
I am puzzled over the way the new breakpoints work…
The issue - as I see it - is already in the way the breakpoints are described at the University:

image

While the number says “> 1920 px”, which is what I would expect and like, the descriptions says, “…applied to screens 1920px wide and above” - which is actually how it works. The difference is in the inclusion of the 1920px width. The result is that the styles designed for ultra-large screens are applied already for regular 1920px monitors… :open_mouth:

Why would it make sense to apply the breakpoint at the top edge of a size tier? Am I missing anything? :slight_smile:

Thank you…

No, not missing anything, unfortunately you are right…

Hmmm… :upside_down_face:
Dear Webflow, is that an intention, or would it qualify as a bug perhaps? :slightly_smiling_face:

Hi Pataka

​I wonder if the article and video at the University will help:
​https://university.webflow.com/article/intro-to-breakpoints

​Basically everything you design in the base breakpoint, Desktop, will cascade down and up. Then it’s possible to change the styles on the next breakpoint down the tablet view and those styles will cascade down from there. Moving up from the base breakpoint it’s possible to change styles to 1280 breakpoint. Every style you make there will cascade up.

​Makes sense?

​Kind regards,

Jörn :sweden:

Hi @JornK , thank you.

I do understand the way styles cascade over breakpoints. What I don’t quite understand is where exactly they do.

As I mentioned in my original post, the issue is captured in the screenshot from the Webflow University: I believe there should be the “≥” symbol, rather than “>”, to be truthful to the way the 1920px breakpoint currently works (as the description says correctly).

But it is not this petty formal detail that I am ‘complaining’ about :slight_smile: It’s the effect it has.

The current generated style for the largest monitors looks like this:

@media screen and (min-width: 1920px)

This little detail means that on a 1920 x 1200 px monitor, the website may possibly look very different when viewed in a maximized window with no vertical scroll bar, compared to when the window is just one pixel narrower (typically, when it has a scroll bar, or is not maximized, but still close to the monitor’s size) - because it is exactly at this last pixel when the next style gets applied.

In my common sense, I guess I see our job to “style the website so that it looks good on a 1920px monitor” (which means the viewport will most likely be somewhere close to this width). This would work if the CSS looked like this:

@media screen and (min-width: 1921px)

While now, one device/monitor kind of requires thinking about two instances - which are triggered at an impractical point, in my humble opinion…

Does my reasoning make any more sense now? :slight_smile:
Thank you

I think you’re correct in their use of > instead of ≥ but I’m a little confused as to where the issue would come into play without seeing a specific example. Does a design your making change substantially at the 1920 breakpoint?

The way I see breakpoints in Webflow (and web design in general) is that you’re modifying designs only when they “break” or become obnoxious for that particular size. It’s completely arbitrary where that breakpoint falls in most cases especially if you’re thinking about how you’re structuring your content and using relative units.

If you want changes at some size between 1440px and 1920px, you can always add custom code that will trigger the adjustments at a size that works better for you or the project. Obviously this isn’t “built in” and won’t reflect in the visible breakpoints at the top of the Designer, but it will work as expected on the front-end it sounds to me like you’re a little more comfortable with code adjustments so this is a fairly straightforward change.