Step 1 of 5
Layout pass at phone widths
Find every layout break at real device sizes.
Run the mobile layout pass at exactly 375px and 414px using device emulation. For every page and modal, record: horizontal overflow (and the offending element via inspect), overlapping or cut-off content, text below readable size, broken grids/cards, images overflowing, and sticky elements covering content. Produce the per-page issue table. Interact while checking - open menus, expand sections, trigger modals.
Expected after this step
A per-page layout issue table from interactive checking at both widths.
Should not happen
- ✕Overflow from fixed-width elements
- ✕Modals with unreachable buttons under the keyboard
- ✕Hover-dependent features unusable on touch
- ✕Tables and long content breaking the viewport
Verify before continuing
Do not move on until every check is true. The complete button stays locked until then.
Do not continue if…
- !Overflow from fixed-width elements
- !Modals with unreachable buttons under the keyboard
- !Hover-dependent features unusable on touch
- !Tables and long content breaking the viewport
If the AI messes this up
Use this when the AI fakes progress or breaks the feature. It forces a real fix.
The pass was screenshot-only and missed interactive breaks. Redo it interacting with every expandable, modal, and menu at both widths.