Improve Mobile Responsiveness

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

5 steps15 verify checks45-75 minutesWorks with: emergent · chatgpt · claude · cursor

Start Guided Walkthrough

#mobile #responsive #layout #touch #viewport

The Route

0/5 verified

Audit every page at mobile widths

Get the concrete breakage list at real device sizes.

3 checks 02

Fix layout and overflow

Kill horizontal scroll and rebuild layouts to flow vertically.

3 checks 03

Fix navigation and touch targets

Mobile users must be able to reach and tap everything.

3 checks 04

Fix forms, tables, and modals

The hardest mobile surfaces need explicit adaptation.

3 checks 05

Mobile QA verification

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

3 checks

Every step ends at a Verify Gate. Do not continue until every check passes.

Context Pack

Paste this first. It briefs the AI on requirements, constraints, and the Definition of Done before your first build prompt.

Context Pack

PROJECT CONTEXT:
My app was built desktop-first and breaks or feels unusable on mobile screens.

GOAL:
Every page works and feels native at 375px width with proper touch targets and no horizontal scroll.

REQUIREMENTS:
- Page-by-page audit at 375px and 768px
- No horizontal overflow anywhere
- Readable text and tappable targets (44px minimum)
- Usable navigation on small screens
- Forms and tables adapted for mobile

CONSTRAINTS:
- Do not hide core functionality on mobile as a 'fix'
- Test at real viewport widths, not by resizing casually

DEFINITION OF DONE:
- No page horizontally scrolls at 375px
- All interactive elements are comfortably tappable
- Navigation is fully usable on mobile
- Forms, modals, and tables work on small screens

COMMON FAILURES TO AVOID:
- Fixed-width containers forcing horizontal scroll
- Desktop nav unusable with no mobile menu
- Tables overflowing with no scroll or stacking strategy
- Modals taller than the viewport with unreachable buttons

Paste this into your AI builder first. It teaches the AI what you want before you give it the build prompt.