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

2 Comments

miller.susan4d agoTop Commenter

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.

josephf103d 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.