Just realized my site theme was breaking on mobile because of a simple flexbox issue

I spent like three weekends tweaking margins and padding on my recipe blog because the sidebar kept jumping below the content on phones. Finally took a closer look and saw I had a fixed width on the main container instead of using flex-wrap. Changed it to flex-wrap: wrap and added a min-width of 320px on the content area and it worked after that. Has anyone else spent way too long on one weird layout bug that turned out to be something small?

2 comments

2 Comments

elliotc104d ago

My buddy ran into this exact thing last month on his band's tour page. He had a fixed width container that looked fine on his laptop but broke completely on iPhone 6s because he was using an old display grid trick that doesn't wrap. Changed it to flexbox with a 100% max width and it fixed the whole layout in like five minutes, he was kicking himself for not trying that first.

william9174d ago

elliotc10 said his buddy fixed it in five minutes with max width 100%, but that would just scale down the container without actually wrapping the flex items underneath. He probably needed flex-wrap: wrap and a min-width on the content area like I did. If the sidebar is still cramped on smaller screens after that trick, it might be because the flex-basis or flex-shrink values aren't set right either. I had to add flex-shrink: 0 on the sidebar to stop it from getting squished into a thin column. Those small flex property tweaks are easy to miss when you're just setting max width.