20
Warning: My portfolio's mobile layout looked awful for months because I used fixed pixel values in my grid.
Switched to fr units and minmax() for the columns and it fixed everything in an afternoon. Anyone else get stuck on that?
3 comments
Log in to join the discussion
Log In3 Comments
brown.susan25d ago
Miles basically hit it. I had a 12 column grid set to 1200px total, so each column was exactly 100px. On my desktop it looked fine, but on a phone the whole grid just overflowed off the right side with a horizontal scroll. I caught it when I checked on my girlfriend's phone, text was tiny and columns were stacked weird. Switched to fr units, used minmax(250px, 1fr) for the columns, and threw in auto-fit for the rows. Fixed it same day.
2
miles_roberts221mo ago
That's a solid fix... switching to fr units makes so much sense for grids. How did you even figure out the pixel values were the problem in the first place? Was it just a case of checking on a phone and seeing it broken, or did you have a specific testing step?
0