Ran into a weird CSS bug that broke my entire layout at 768px width...

I was building a simple landing page for a client last week and hit this really strange issue. Everything looked perfect at desktop sizes, then at 768px width the whole thing just collapsed. The main content area jumped out of its container and the footer floated up into the middle of the page. Turns out I had a missing closing bracket in a media query that was overwriting my grid properties. It took me about 3 hours to find it because the inspector showed the wrong elements as the problem. The funny part is I had built exactly the same kind of layout maybe 20 times before without this happening. Has anyone else gotten tripped up by a syntax error that only shows up at one specific breakpoint?

2 comments

2 Comments

perez.cole4d ago

Bro, that reminds me of my buddy Dave who spent like 4 hours debugging a layout that broke at exactly 1024px. Turns out he had a typo in his CSS where he wrote "display: flxe;" instead of "flex" and it only triggered when a specific column wrapped at that width. He was so mad cause the inspector kept pointing to a totally different div that had nothing to do with it. He almost threw his laptop out the window lol.

riley5954d ago

Huh, I don't know about almost throwing a laptop out the window over CSS. That seems a little dramatic to me, @perez.cole. Don't get me wrong, I've had my share of frustrating bugs, but at the end of the day it's just code. You can walk away, grab a coffee, come back and fix it. Four hours on a typo is bad, sure, but that's on him for not catching it sooner. I'd be more annoyed that the inspector lied to me than the typo itself. People get way too heated over stuff that'll be forgotten in a week.