My dropdown menu stretched across the whole screen on mobile

Last Tuesday I was testing a client's site on my iPhone and the nav dropped down to show all 14 items in one giant row. The text was tiny, the padding was gone, and it looked like a salad of links spread from edge to edge. Turns out I forgot to reset the flex-direction for the mobile breakpoint, so the desktop horizontal layout just squeezed everything together. I spent a good 45 minutes blaming the framework before I checked the computed styles and saw the flex-wrap was doing all kinds of nonsense. Fixed it by adding a simple media query with flex-direction column and it was fine. Has anyone else had a layout that looked perfect in dev tools but fell apart on an actual phone? What's your go-to trick for catching these before you hand it off?

0 comments

0 Comments

No comments yet

Be the first to share your thoughts on this discussion.