The most popular tablet by far is the standard iPad, which is 768px x 1024px. And the stats show that most people use their iPad in Landscape mode (1024) the majority of the time (games, surfing, email, etc.), except for perhaps reading an ebook. That part doesn’t really matter though, because any web developer worth his or her salt will make the site look good no matter the device orientation. So the issue is that Weblow’s 991px doesn’t fire the code block on the iPad because it’s looking for 991px width or less and not 1024px width or less.
I also have an iPad Pro 12.9". And it is 1024px x 1366px. So yeah, most of the time you won’t need any responsive code to fire for it when using it in “Landscape mode” (1366), because 1366px is still desktop/laptop territory. However, you do need a block of responsive code to fire for when you turn it to “Portrait mode” (1024). And yet again the problem in Webflow (for either the standard iPad or iPad Pro) is cranking out max-width: 991px, which does nothing for you unless you manually find and replace the exported 991px CSS every single time with 1024px.
The CSS find and replace doesn’t sound like s big deal, but when you are testing and exporting website code on several devices seven or eight times every day, the unnecessary find and replace starts to eat time and build frustration.
I have to agree that 1024px would be a much better breakpoint than 991px. It just feels safer to have a slightly larger breakpoint imo. If not that, then at least a way to change the breakpoints in Settings. Having to write custom css media queries everytime is a pain.
Unfortunately the Webflow developers mistakenly used the 991px breakpoint from the outdated Bootstrap framework. (CSS Grid has now replaced it).
At the time, Bootstrap classified tablet devices in a pixel range of 768px to 991px. The Bootstrap developers made a mistake trying to classify tablets in that pixel range, and unfortunately everyone followed their lead without even thinking about it. A breakpoint of 1024px is what it should have been. The first iPad was released in April 2010; a year before Bootstrap was released in August of 2011. The first iPad was 768 x 1024px, so there’s no excuse for the Bootstrap developers to have made the breakpoint 991px instead of 1024px.
Which is very cool, but yet again the useless tablet 991px breakpoint was ignored again. How many times does every single Webflow user and web designer need to say we don’t need a 991px break point we need a 1024px breakpoint!!!
Just treat anything below the new breakpoint of 1280 as tablet as this is where nowadays desktop resolutions start and design your interface accordingly.
I’m working on a project right now, and this is the most relevant thread I’ve seen with regard to tablet landscape issues. It’s driving me insane. I’m ready to hire anyone in this thread for a few hours of work to help me with tablet responsiveness. Please DM me if you can help. I don’t know how to customize the CSS breakpoints myself.
Welcome to the no code mess. And an even bigger welcome to the Act of stop listening to your customers. Webflow concentrates now on getting more funds and they shifted to Enterprise.
The best way is to change the 991 to 1024 after you export the code. I open the exported CSS file and do a search and replace to change 991 to 1024.
@media screen and (max-width: 991px) { change to → (max-width: 1024px) {
Remember “max-width” means this number and below.
The 991 breakpoint is a worthless breakpoint as NO device I have ever used has ever needed a 991 breakpoint, whereas plenty of devices, especially tablets, can use a 1024 breakpoint. And now, the newly introduced “1920 and up” breakpoint is pretty worthless as well. The moment someone is using a 1920 x 1080 desktop or laptop and full screens their browser… the 1920 and up breakpoint fires. Wow! That’s a really dumb breakpoint! So now I have to change that one from 1920 to 1921.
There are a lot of things I love about Webflow, but their lack of common sense toward needed breakpoints (or custom breakpoints) is Webflow’s biggest weakness.
I wish one of these “years” Webflow would listen to the people who actually build websites day-in and day-out!
For what it’s worth - I will shrink the default Base Breakpoint to 1024px so I can see Ipad Landscape at least. Then make a call if it needs media query edits or not. If you use percentage or em based paddings, margins, sizes then you can get away with it most times.
This issue is such an oversight! I’ve been struggling with an absolute positioned div going off the page between 991 and 1024 and my media query adjustments aren’t working. I’m a designer, not a developer and strugging to figure out why my custom css isn’t working. Would appreciate any guidance! This is what I’ve done and it’s not doing anything.
