Skip to content
Flows
Library Paths Vault Generate Progress Run Demo Flow
Debugging Beginner · 45-75 minutes

Improve Mobile Responsiveness

Make your app genuinely usable on phones: audit at real widths, fix layouts, and verify touch targets.

Start Route · 5 steps

The route

5 steps to Done

  1. 01

    Audit every page at mobile widths

    Get the concrete breakage list at real device sizes.

    Preview prompt + verify gate ▾

    Audit the entire app at exactly 375px and 768px widths. For every page and modal record: horizontal overflow (yes/no and the offending element), unreadably small text, overlapping/cut-off elements, touch targets under 44px, unusable navigation, and broken forms/tables. Output the issues table ordered by page. Use devtools device emulation and actually interact - do not just look.

    • ✓ Both widths tested per page
    • ✓ Overflow sources identified specifically
    • ✓ Interactions tested, not just rendering
  2. 02

    Fix layout and overflow

    Kill horizontal scroll and rebuild layouts to flow vertically.

    Preview prompt + verify gate ▾

    Fix all layout issues from the audit. Requirements: eliminate every horizontal overflow (fluid widths, max-w, flex-wrap, grid collapse to single column); multi-column layouts stack sensibly on mobile; spacing scales down appropriately; images and media scale within their containers; verify each fixed page shows zero horizontal scroll at 375px.

    • ✓ No page scrolls horizontally at 375px
    • ✓ Columns stack in a sensible order
    • ✓ Media never exceeds its container
  3. 03

    Fix navigation and touch targets

    Mobile users must be able to reach and tap everything.

    Preview prompt + verify gate ▾

    Fix navigation and tappability. Requirements: implement a mobile navigation pattern (hamburger menu/drawer or bottom nav) exposing all destinations; all buttons, links, and icons hit at least 44x44px tap areas with adequate spacing; hover-only interactions get tap equivalents; sticky elements must not cover content or each other.

    • ✓ Every destination reachable via mobile nav
    • ✓ Tap targets meet 44px with spacing
    • ✓ No hover-only functionality remains
  4. 04

    Fix forms, tables, and modals

    The hardest mobile surfaces need explicit adaptation.

    Preview prompt + verify gate ▾

    Adapt complex surfaces. Requirements: forms use full-width inputs, correct mobile keyboards (email/number types), visible labels, and reachable submit buttons; tables either scroll horizontally within their own container or restack into cards - state the choice per table; modals fit the viewport with internal scrolling and always-reachable close/action buttons; test each with the on-screen keyboard open.

    • ✓ Inputs trigger appropriate keyboards
    • ✓ Each table has an explicit mobile strategy
    • ✓ Modal actions reachable with keyboard open
  5. 05

    Mobile QA verification

    Re-run the audit to prove the app is genuinely phone-usable.

    Preview prompt + verify gate ▾

    Re-run the full audit from step 1 at 375px and 768px, now expecting zero issues: no overflow, all targets tappable, nav complete, forms/tables/modals usable. Additionally complete the app's core user journey end to end entirely at 375px and report PASS/FAIL per step with evidence. Fix any stragglers and re-verify.

    • ✓ Re-audit shows zero layout issues
    • ✓ Core journey completed at 375px
    • ✓ All fixes verified by interaction