Debugging Layouts

Debugging Layouts: Debugging Layouts with Developer Tools, Common Layout Bugs and How to Fix Them.

Updated

  1. Debugging Layouts with Developer Tools (Journeyman): A seven-step routine for "why does it look like that?", using the Computed pane, the box model diagram, the flex and grid overlays, switching rules off, forcing :hover and :focus, and the outline trick.
  2. Common Layout Bugs and How to Fix Them (Journeyman): The seven layout bugs almost everyone meets, from a page that scrolls sideways to a z-index that won't work, each with its symptom, its cause and the fix that removes the cause instead of hiding it.