How does breakpoints even work? None of the numbers make any sense

I’m looking at the numbers for the breakpoints and I’m just puzzled. It says mobile portrait is the breakpoint for devices with < 767 pixels width. But any decent phone now is over twice that in portrait. My iPhone XR is 1792x828. How does it know what breakpoint to use when I have desktop width on my phone?

Also, why is 1440 width a breakpoint for “larger screens”? I’m guessing it’s referencing 1440p monitors, but those are 1440 pixels in height, not width.

@Fonsume,

Thank you for reaching out about this. As we do try to make the breakpoints work in favor for all of the users who have many different device sizings, there are some things to keep in mind here.

A phone’s pixel resolution isn’t what is used to determine which breakpoint will be applied. They typically use the point system (which is usually in the < 767px range). For iPhones, take a look at this: The Ultimate Guide To iPhone Resolutions. There is a point value that scales to fit the resolution of your phone, so while your device’s dimension can be extremely large, the browser will know how the device and how to render that information.

The 1440 breakpoints become active when the minimum size (in width) of a display is 1440px. The 1440px breakpoint came recently as one of the 3 newer breakpoints that Webflow introduced in early April. Previously, users were limited to Desktop and smaller breakpoints. Because a lot of Webflow sites were designed with these breakpoints is mind, we couldn’t change the value for these breakpoints and therefore introduced three larger ones.

This info came from the PM who spearheaded the initiative.

Have a Great Day and Happy Designing,
~ Brandon

2 Likes