Layout Debugging Logs That Pay Off During Your Next Redesign
You've been debugging a CSS mess for hours. Finally, you find it: a missing min-width: 0 on a flex child, or a z-index war you didn't start. You fix i...
8 articles in this category
You've been debugging a CSS mess for hours. Finally, you find it: a missing min-width: 0 on a flex child, or a z-index war you didn't start. You fix i...
You've been there. A row of cards, perfectly aligned—until you add gap: 20px and suddenly there's an extra 20px of whitespace at the edge, like a ghos...
Layout debugging is rarely about the big things. Most of the time, it's a cascade of small decisions that quietly add up to a mess. Positioning is a p...
You scroll down a page. The sticky header vanishes behind a banner. A dropdown menu clips under a video player. A tooltip pops behind its trigger. If ...
You spent an hour on a dropdown menu. It looks perfect in isolation. But inside the real layout, half the options vanish. Your first instinct? Add ove...
So you set up a nice three-column grid. Layout looks solid in Figma. You code it: grid-template-columns: repeat(3, 1fr) . In practice, you want a shor...
You have written the perfect media query. @media (min-width: 768px) — clear, logical, mobile-initial. But the browser ignores it. The layout stays stu...
You push a build. Five minutes later, Slack lights up: 'The checkout page is broken on iPhone 12.' You open DevTools, toggle the device toolbar, and s...