My CSS art broke when I resized the browser, here is what fixed it

I was making this little pixel-style sunset scene with box shadows and gradients, all in one div. It looked perfect at full screen on my monitor, but when I shrank the browser down to preview it on mobile, the whole thing collapsed into a mess of overlapping rectangles. The sun ended up behind the mountains and the gradient banding went crazy. I spent about 45 minutes in my kitchen, coffee going cold, tweaking clamp() and vw units piece by piece. The key was switching from fixed pixel sizes to percentage-based positioning for the main layers, then using min() for the shadow spread. Now it holds up from 320px all the way to 2560px, which feels like a small victory. Has anyone else had a layout that breaks specifically when the viewport hits a certain width, like 768px or something weird like that?

1 comments

1 Comment

josephf104h ago

Did the percentage positioning mess with the overall aspect ratio on different screens, like making the scene stretch weird on super wide monitors, or did you lock that down too? I always get nervous swapping to percentages because that feels like it trades one breakpoint for another, maybe worse. Curious if you found a way around that or just accepted it.