Tried a simple CSS animation on my first webpage and it broke the whole layout

I spent last weekend building my first personal site and got excited to add a spinning logo animation. Turns out I forgot to set the overflow property on the parent div and the entire header just vanished. It took me 3 hours of googling before a dev in a Discord server pointed out my mistake. Has anyone else had a tiny CSS property turn into a nightmare?

3 comments

3 Comments

terryk1027d ago

Why wouldn't you just test it in a browser first?

the_robert27d ago

Haven't we all been burned by something that looked fine in a browser but fell apart on mobile? I used to think browser testing was enough until a layout disaster on a client's phone taught me otherwise. Now I always check on the actual device before shipping anything out.

carter.laura16d ago

Terry, the thing is browser testing has a SPECIFIC purpose but it's not the final check. I've been caught by this too many times, for example the touch targets on a 13 inch laptop screen look fine but on a 4.7 inch iPhone they're tiny and hard to tap. You also miss things like how the phone handles wifi vs cellular data loading, or how the notch or holepunch cutout affects the top of the page. Browser dev tools can KIND OF mimic mobile screens but they don't replicate the actual feel, the real device's GPU, or the way the OS renders fonts and shadows. It's like checking your car's engine with just a flashlight through the window instead of actually popping the hood and looking at the parts.