Riddle me this Batman… with the iPad continuing to massively dominate the tablet market, why are we stuck in Webflow with 991px as a tablet breakpoint over 1024px?
Wouldn’t it be oh-so-helpful if Webflow could offer some sort of breakpoint override, perhaps in Project Settings?
Breakpoints for:
iPad 2 (Second Generation) - 768 x 1024 px
iPad Air (5th Generation) - 768 x 1024 px
iPad Air 2 (6th Generation) - 768 x 1024 px
iPad Mini (1st Generation) - 768 x 1024 px
iPad Mini 2 - 768 x 1024 px
iPad Mini 3 - 768 x 1024 px
iPad Mini 4 - 768 x 1024 px
iPad Pro (1st Generation) 9.7-inch - 768 x 1024 px
The iPad - 768 x 1024 px
iPad Pro 10.5-inch - 768 x 1024 px
iPad Pro 12.9-inch - 1024 x 1366 px
Because of what Bootstrap defined a while ago (still makes sense today).
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
You concern is legitimate I think but 768 to 991 doesn’t address only tablets, let alone only iPads.
I don’t see how max-width: 991px makes sense? For what minor tablet devices would that be for exactly? Yes, I understand that we can’t target for every single tablet device, but the standard rule in web development is to target for the “majority” and iPad is the massive majority in the tablet market (US market share 77.4%) and has been all this time.
Also Webflow is cranking out (max-width: 991px) and NOT min-width. Max-width means if the width is “less than” or equal to 991px. That makes a difference because an iPad at 1024px won’t fire on that. So now, every single time I export out of Webflow I have to do a find and replace in the CSS for all of the 991s and change them to 1024. I can custom code all day long, but the point of Webflow is that it is supposed to be helping me to save time, but when it comes to breakpoints it’s not saving me time.
I think that overwhelming amount of tablet users don’t use them in landscape, perhaps only to watch films or something. Haven’t seen the statistics but sounds plausible, eh?
Landscape or portrait, I still have no choice but to target my design to resize and work for 768 and 1024. And Webflow’s max-width: 991px hard code is just creating more work for me.
Maybe portrait mode for reading e-books, ok. But for movies and games, it’s all landscape mode. Still doesn’t matter though, because either way you still have to build your website to fit both 768 portrait mode and 1024 landscape mode as it is the most popular tablet viewport size by far. And as you can see from the below majorities, a max-width: 991px breakpoint doesn’t make sense for any of it.
United States tablet market share March 2019
Apple tablet market share 77.4% (768 x 1024 and 1024 x 1366 typical viewport)
Samsung tablet market share 8.12% (768 x 1024 and 800 x 1280 and typical viewport)
Amazon tablet market share 7.1% (800 x 1280 and 1200 x 1600 typical viewport)
Other tablet market share 7.38%
Just found the stats for our discussion here. Yep, almost half of users make use of tablet landscape. OK, I concur this is bad since most of the time workflow for tablets and desktops are different (all the hovers on desktop, duh!)
Ok, what I’m seeing here is that users are not stopping to understand that Webflow is JUST exporting @media (max-width: 991px). There is no landscape or portrait orientation distinction. In Webflow you see a “tablet portrait icon” in the interface, but in reality, all you’re getting in the exported code is just max-width: 991px. Yes, the other exported 767px breakpoint (767 width or less) is very useful, but 768 to 991 for tablets? No, 991 is not useful at all. The Webflow interface is confusing because you’re seeing a tablet portrait icon, but that’s not what you’re getting in the exported code. You aren’t getting an orientation in the code at all, just a 991px max-width. That’s all, just a width. So when I turn my 768 x 1024 tablet from 768 portrait mode to 1024 landscape mode the Webflow max-width: 991px breakpoint doesn’t fire or do anything, because it’s looking for a 991 width or less and is not looking for a 1024 width or less. So do you see now, why a max-width: 991px is not useful? At 1024 all of the CSS inside your 991 block does not fire and is useless… unless you manually change the exported breakpoint to 1024. Not sure how many more ways I can explain this.
I’m saying Webflow’s max-width: 991px breakpoint hard code (that means if the device width is 991px or less) just creates more work and doesn’t make sense. Why is Webflow’s tablet portion set between 768-991 and not 768-1024? Where are the majority device stats to back-up a 991px width? I don’t see them on the Web. It would be a whole heck-of-a-lot more useful if it was already set at 1024 or if I could go into the Webflow Settings area an override it from 991 to 1024. I’m not alone in this. I can see now, after more searching, other web developers are complaining about the 991 in Webflow as well. Again the whole point, at 1024 all of the CSS inside your 991 block does not fire and is useless… unless you manually change the exported breakpoint to 1024.
The desktop width should range down to 1025px and not 992px. And the tablet should start its range from 1024px down to 768px. I would really like to hear from the Webflow staff on why they think any web developer creating a responsive web site needs a 991px breakpoint…? I would also like to hear from them what device they think needs a 991px breakpoint…? Because certainly not a single Apple desktop, phone, or tablet device needs a 991px breakpoint.
Right now I am continuing to find and replace every 991px with 1024px in the Webflow CSS output. Again, if the 991px breakpoint is so useful, then why am I having to replace the 991px for every responsive web site I am building with Webflow…? Is the Webflow staff even listening to the needs and concerns of its monthly paying subscribers (like me)?
I feel like I have presented a solid mathematical case as to why a 991px breakpoint is useless in responsive design, especially with all Apple devices.
The best possible solution I can think of would be for Webflow to allow us to override / define the breakpoints on a project by project basis. Let us choose.
I’m curious why this is an issue? This is a serious question – I hope I don’t sound snippy! I use a 12.9" iPad and I dislike it when I come to a rare site that serves up the tablet, rather than desktop version. On an iPad that large, in my experience, the tablet layouts tend to be awkward and less useful. This is just my perspective as a person using a large iPad.
Not really - iPad pro is a weird beast that would require breakpoints at 1366 to make sure it works in landscape so I’d rather not be concerned about it
