Found a CSS bug that broke my site at exactly 1024px viewport width

Spent last Tuesday tracking down why my homepage turned into a mess on tablets. Turns out I had a media query that fired at 1024px and it was conflicting with a max-width set on a container. The whole right column just vanished. Poof. Gone. Took me 3 hours of resizing my browser pixel by pixel to catch it. The dumb part is I wrote that media query 6 months ago and never tested it on anything but my phone and desktop. Has anyone else run into a weird specific breakpoint like that where your layout just falls apart for no good reason?

2 comments

2 Comments

shah.evan5d ago

I heard a frontend dev once say 1024px is cursed because it's exactly where iPad portrait mode sits and most people never check that breakpoint. Three hours pixel hunting sounds rough though, I definitely would have rage quit halfway through.

kellymurphy5d ago

Me too I started testing at exactly that size first after one nightmare layout shift on an iPad.