Use it when
When visitors can accidentally scroll off the side.
Before moving on
Check widths around 320px, 390px, and 768px where feasible, including long content.
03 / BUILD FOR SMALL SCREENS
Fix a mobile layout
Find the cause of overflow, repair header overlap, and keep controls usable on a phone.
Set the direction first
Reproduce the issue at a specific viewport width. Give the assistant the route, affected element, and expected behavior. Check desktop afterward as well.
STARTING BRIEF
Reproduce the issue at a specific viewport width. Give the assistant the route, affected element, and expected behavior. Check desktop afterward as well.
Work through these tasks
Open one task, customize it for your project, and check the result before moving on. Skip any step that does not apply.
Use it when
When a fixed or sticky header covers content.
Before moving on
Check first load, anchor navigation, expanded menus, and orientation changes.
Use it when
When body text or labels feel tiny on a phone.
Before moving on
Check wrapping, text zoom, labels, and absence of horizontal overflow.
Use it when
When small or crowded controls are frustrating.
Before moving on
Check neighboring targets, visible focus, and compact-screen fit.
Use it when
When images look distorted or too wide on mobile.
Before moving on
Check aspect ratios, intrinsic dimensions, and large and small viewports.
Use it when
When keyboard users cannot see or reach controls.
Before moving on
Check logical tab order, visibility, activation, and no keyboard traps.
Keep a recoverable checkpoint.
Save your work or review a Git commit between meaningful stages. A clean checkpoint makes the next experiment easier to understand and reverse.
Learn the terminal basics →