Loading…
7
Appreciation post: how a single line of CSS fixed my broken carousel
I was building this product carousel for a client's site last Tuesday. I had the JS logic working fine, arrows clicked, items slid, everything seemed good. But when I tested it on mobile, the whole layout broke. Items were stacking vertically instead of staying in a row. I spent about an hour messing with flex properties and media queries. Then I realized I forgot to add white-space: nowrap to the container. That one line fixed the whole thing. The code went from 80 lines of desperate flex hacks down to 30 clean ones. Has anyone else had a moment where the simplest CSS rule saved you from overcomplicating something?
2 comments
Log in to join the discussion
Log In2 Comments
miller.susan4mo ago
actually white-space: nowrap isn't really the right fix here. if you need items in a row you should use display: flex on the container instead. nowrap only stops text from wrapping but it doesn't force block elements into a row the same way flex does.
4
josephf104mo ago
actually white-space: nowrap isn't really the right fix here" - yeah, I've been there lol, flex is way cleaner for layout stuff and saves you from weird edge cases down the road.
4