I finally figured out why my CSS grid kept breaking on mobile

Ngl I spent like 3 hours last night wondering why my columns looked fine on desktop but turned into a mess on my phone. Turns out I was using fixed pixel widths instead of fr units for the grid tracks. A buddy in a Discord server spotted it in like 30 seconds after I shared my code. Anybody else get tripped up by this stuff early on?

3 comments

3 Comments

the_mary11d ago

Ugh I did the exact same thing with percentages once haha.

garcia.cameron11d ago

The worst part is when you're so sure you did it right too. You run the numbers twice, third time just for kicks, and still somehow end up in the wrong ballpark. Percentages are just sneaky like that. They look simple on paper but then you're off by a factor of ten and wondering how you even passed math class. At least you caught it before anything bad happened I hope? I swear every time I do percentage stuff I have to triple check against a calculator just to be safe.

corap6111d ago

Fixed pixel widths got me too back when I was messing with a photo gallery layout. Thought I was being clever with exact numbers, then on my buddy's old iPhone it looked like someone took a blender to the whole thing. Spent a good hour shouting at my monitor before realizing fr units were the answer. Kinda embarrassing that a line of text in a forum post fixed what I couldn't for hours.