23
A 2px border that expanded my entire layout on mobile
Last month I was tweaking a card component for a portfolio site and added a 2px border to the bottom for a subtle divider. On desktop it looked fine, but when I checked my phone in Chrome DevTools, the cards suddenly went from 3 columns to 1, and the footer jumped down by about 200 pixels. I spent two hours refreshing and resizing before I realized the border was pushing the box-sizing from content-box to something unexpected, which broke my flex basis. Has anyone else had a tiny border or padding change blow up their entire grid layout at a certain breakpoint?
1 comments
Log in to join the discussion
Log In1 Comment
noah_black10d ago
Did you have box-sizing set globally on everything before you added that border, or just on the cards themselves? I ask because that's usually the difference between a minor hiccup and your whole layout taking a dive. Figuring out where your reset sits can save you the next two-hour session.
3