My 3-column layout finally broke cleanly on mobile after 6 months of fighting

I've been wrestling with this landing page for a local bakery in Portland since January. Every time I thought my grid was solid, some weird text wrap or image size would throw the whole thing off on a Galaxy Fold or an iPad mini. Finally last week I swapped out my absolute units for `minmax()` with clamp and it just clicked. Has anyone else had that moment where one CSS function makes everything fall into place?

2 comments

2 Comments

val_taylor11d ago

My phone browser basically became my mortal enemy for three months straight because of one stubborn breakpoint on a Pixel 6. Wound up just using `grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))` and suddenly my coworker stopped asking why the menu items were stacking sideways. Felt like I'd been using a hammer to screw in a lightbulb the whole time.

reese55111d ago

Honestly, I spent like a week fighting flexbox until I realized I just needed to use percentages.