How I Improved Mobile Responsiveness Across a Real-World Web App
Desktop-first SaaS UIs often “work” on mobile while remaining painful: horizontal scroll, tiny tap targets, modals that trap focus, tables that overflow forever. I ran a focused mobile pass on a live app. This is the checklist that produced the biggest wins.
Audit on Real Devices, Not Only DevTools
Chrome device mode finds CSS bugs. Real phones find tap, keyboard, and viewport issues. I tested:
- iPhone Safari and Android Chrome
- Logged-in flows: login, dashboard, create form, settings
- Both portrait and landscape for tables and charts
Fix the Layout System Before Pixel Tweaks
- Replace fixed widths with fluid containers and
max-width - Stack sidebar + content below a single breakpoint
- Prefer CSS Grid/Flex gap over magic margin numbers
- Avoid nested horizontal scroll regions
.app-shell {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.app-shell { grid-template-columns: 240px 1fr; }
}Touch Targets and Forms
- Minimum ~44×44px tap areas for primary actions
- Inputs full-width on small screens; labels above fields
inputmodeand correcttypefor email/tel/number- Sticky submit bars that do not cover content awkwardly
Tables and Dense Data
Wide tables never fit phones. Options that worked:
- Card layout per row under the breakpoint
- Priority columns only; “View details” for the rest
- Horizontal scroll as last resort, with a visible fade hint
Modals, Drawers, and Soft Keyboards
Full-screen drawers beat centered modals on mobile. Watch for keyboard covering inputs — scroll the
focused field into view and avoid 100vh traps on mobile browsers.
Performance Is Part of Responsiveness
- Defer non-critical scripts
- Serve appropriately sized images
- Avoid heavyweight hover-only interactions as the only path
Final Thoughts
Mobile responsiveness is a product quality bar, not a CSS chore. Audit real flows, fix the shell, then polish components. Users forgive plain visuals faster than they forgive unusable taps.
Written by A.M. Rinas · Published August 31, 2026
