I have a media query breakpoint at 768, and it works for the Apple iPad in portrait mode (768 pixel width), but some settings, like padding-top and certain font sizes, fail on a Google Nexus 7 at 800 pixels wide. I tried a new breakpoint at 800 but nothing changed.
Also, I tested on Apple iPad Pro 12.9 at http://responsivechecker.net/device/ipad-pro-12-9. In landscape at 1366x1024 the site has a few issues, and in portrait at 1024x1366 it also has a few issues (but not many).
My breakpoints are 320, 576, 768, and 992 and 1200. Based on what I’ve seen I think I may need to add a breakpoint at 1440 and revise the 1200 breakpoint. My desktop monitor is 1454, so I would use 1440 to target desktops and wider.
I have two questions:
- Why would a 768px breakpoint fail on a device at 800px?
- I know it’s not a science, but what are the best breakpoints?
All of my problems are with the higher resolution tablets, but I’m just not clear on what breakpoints to use.
Thanks for any insights.