29
My grid layout broke on a 13 inch screen in a weird way
I spent 3 hours tweaking a CSS grid for a landing page and it looked perfect on my 27 inch monitor. Then I pulled it up on a client's laptop at a Starbucks in Denver and the whole thing shifted into a single column mess. Turned out I forgot to set a minmax on one column and it collapsed below 1024 pixels. Has anyone else had a grid fall apart on a smaller screen like that?
2 comments
Log in to join the discussion
Log In2 Comments
the_jenny5d ago
Used to think I could eyeball grid layouts and they'd just work everywhere. Then I had this exact thing happen on my old Surface Pro and the whole footer ended up floating in the middle of the screen like some kind of art piece. Now I always set minmax on my columns right from the start and test on at least three different browser sizes before calling it done. It's a pain but it saves so much time later. Definitely made me way more careful about responsive breakpoints.
7
lily_sullivan825d agoMost Upvoted
Testing on three different browser sizes is the real minimum honestly, I do like five or six now because even minmax won't save you if you forget to check how it wraps on a weird 1024px tablet. Isn't it funny how one broken footer can turn you into a total breakpoint obsessive for life?
4