I spent a whole weekend on a CSS flexbox layout and it broke on mobile

I was sitting at my kitchen table last Saturday trying to get a simple three-column layout to stack right on phones. I followed every tutorial and copied code from Stack Overflow, but it kept overlapping on my Pixel 5 screen. After 6 hours of messing with margins and flex properties, I finally realized I forgot to add the viewport meta tag in the HTML head. Once I put that in, everything snapped into place in about 2 minutes. It made me think that beginners like me should check the basics first instead of jumping into complex fixes. Has anyone else wasted a bunch of time on something this tiny before?

3 comments

3 Comments

murphy.tessa1mo ago

Classic. Forgot the viewport meta tag myself last Tuesday...

patricia2621mo ago

@murphy.tessa Yep, THAT one gets you every time. Such a tiny thing but the page looks BROKEN without it.

the_fiona1mo ago

Gasp. Last Tuesday? No way.