Grid gap completely broke my mobile layout last Wednesday

I was redoing a product grid for a client site and used grid gap without thinking. On desktop it looked perfect with 16px spacing. But when I tested on my phone, everything shifted weird because I forgot to account for the smaller container width. Took me about 45 minutes to figure out it was the gap value that was causing overflow. Switched to using margin on the items instead and set up a media query to adjust. Anybody else run into this where gap values mess up responsive layouts?

2 comments

2 Comments

betty_fisher52d ago

yeah the container width thing got me too, such an easy mistake to make

-1

amy_reed792d ago

Right? It's the little things that trip you up every time. Fixing it instantly cleaned up my whole layout. Such a relief when you finally spot it.