Warning: that responsive grid I was so proud of broke on an actual phone

I was building out a portfolio site for a friend last summer, sitting in a coffee shop in Nashville with my laptop. I had this fancy 12-column grid that looked perfect on my 27 inch monitor and even scaled down nice on a tablet. But when I pulled out my old iPhone 8 to test it, the whole layout just collapsed into a jumbled mess. Images overlapped text, navigation buttons were hidden off screen, and the contact form was unclickable. I spent maybe 45 minutes tweaking minmax values and adding media queries for smaller breakpoints before it finally behaved. What I learned is that my grid was too rigid with fixed column sizes, and I needed to let content drive the sizing more. Has anyone else had a layout that looked great in dev tools but fell apart on an actual small screen?

2 comments

2 Comments

rowanp157d ago

Did your friend end up starting over or just fixing the media queries?

michaelcoleman7d ago

Those three extra minutes of testing on an actual device cost me almost an hour of my life I'll never get back lmao. I think I muttered "but it worked in Chrome" like five times while frantically resizing my browser window afterward. My buddy just sat there drinking his cold brew watching me spiral over what was basically a 320px wide disaster. If I had a dollar for every time a layout looked "done" on a big screen then fell apart on a real phone, I could buy a better testing device probably.