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:
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…
Why would it make sense to apply the breakpoint at the top edge of a size tier? Am I missing anything?
I wonder if the article and video at the University will help:
Breakpoints | Webflow University
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,
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 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?
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.
Pataka, you are correct. Having a breakpoint at 1920 for a typical 1920 x 1080 desktop makes zero sense. We are only talking about a 1 px difference between 1919 to 1920. Yes, Webflow should have made min-width: 1921px and not 1920px. Stuff like that blows my mind. Do the developers at Webflow even design websites? Apparently they don’t even care to run those breakpoints by real web developers building websites day-in and day-out.
The 991 breakpoint should have also been 1024. I already have a whole rant about that one as well. After export for an external site, I have to go into the CSS and replace the 1920 with 1921 and the 991 with 1024. It’s a pain that could have been easily solved had Webflow cared enough to consult real web developers doing the real work.
