Loading…
5
Built 47 grid layouts before I figured out my sidebar was eating the whole page on mobile
So I was messing around with grid-template-columns on a blog layout last week and I kept bumping the sidebar breakpoint from 768px all the way down to 480px trying to stop it from squishing everything. I finally opened dev tools on my actual phone at like 11pm and saw the sidebar was taking up 3 of my 4 columns because I wrote minmax(200px, 1fr) on a container that was only 375px wide. I had been testing on a resized desktop window for 47 different grid variations and never once checked a real device, which is embarrassing to admit. The fix was just switching to grid-template-areas with a single column stack below 600px, took me 4 minutes after I actually saw the problem. What got me was that four of my earlier layouts technically "passed" because the container had a max-width of 1200px on desktop so the columns never had to fight for space. If you're building grids and only shrinking your browser window instead of testing on a phone, you're basically guessing. Has anyone else had grid columns act totally different on an actual device versus a resized window?
0 comments
Log in to join the discussion
Log In0 Comments
No comments yet
Be the first to share your thoughts on this discussion.