Skip to main content

Every site claims to be "mobile responsive." Most of them work in the sense that nothing is technically broken. They still convert badly. The difference between "not broken on mobile" and "actually good on mobile" is a long list of subtle decisions. Here are the eight mistakes I see most often when auditing client sites.

1. Tap targets too small or too close together

Apple's Human Interface Guidelines say 44×44 px minimum. Material says 48 dp. Neither is optional. Buttons smaller than that, or two adjacent links with no padding between them, mean users tap the wrong thing constantly.

Quick fix: every interactive element on mobile gets min-height: 44px and at least 8px of breathing room from its neighbors. Even simple text links in navigation need padding to bump up the hit area.

2. Body text under 16px

Anything under 16px on mobile triggers iOS Safari to zoom on focus, breaking the layout. It also just looks small and unreadable. 16px is the minimum, 17–18px is better for actual reading.

This applies to form inputs too. Set inputs to font-size: 16px minimum or your form fields will zoom every time someone taps them.

3. Hover states with no mobile fallback

"You can read more details on hover" is a desktop assumption. On mobile, hover doesn't exist (a tap-then-hold isn't the same). If important info only appears on hover, it's invisible to most of your traffic.

Either show the info inline on mobile, or convert hover details into expandable sections.

4. Horizontal scroll where it shouldn't be

Nothing kills mobile UX faster than the entire page scrolling sideways because one element overflowed. Common culprits:

Add overflow-x: hidden on the body during development to catch this immediately.

5. Forms that don't fit one thumb

Most mobile forms are designed for desktop and shrunk down. They should be designed for one-handed thumb reach instead:

6. The fold problem

On a typical phone, the visible area before any scrolling is roughly 360–400 px tall after the browser chrome. If your hero takes up the entire fold with just a logo and a brand name, the user sees nothing useful. They scroll, see what looks like another generic homepage, and leave.

The fold should communicate three things: what you do, why it matters, and what action to take. Big visual hero is fine — but pair it with a clear headline and a CTA visible without scrolling.

7. Heavy backgrounds that destroy mobile performance

That gorgeous background video, parallax hero, or full-bleed animation looks beautiful on a 4K monitor and freezes mid-frame on a 3-year-old Android. Mobile traffic is on weaker GPUs, slower CPUs, and worse networks.

If you must use video backgrounds:

Same with backdrop blurs — beautiful on Mac, expensive on phones. Strip them on mobile.

8. Navigation that hides everything important

The hamburger menu trend shifted everything behind a single icon. That's fine for secondary nav. Not for your primary CTA. If "Get a Quote" is buried behind a hamburger menu, you've made it 70% less effective.

Pattern that works:

How to test it properly

"It works on my phone" isn't enough. Run through this checklist:

  1. Test on Chrome's device emulation at 360 px wide (the small end of Android).
  2. Test on a real iPhone in Safari. Some bugs only show up on Safari iOS.
  3. Throttle the network to "Slow 4G" and reload. How long until the page is usable?
  4. Tab through the page with a keyboard. Can you reach everything? Is focus visible?
  5. Run Lighthouse mobile. Aim for 90+ on Performance, Accessibility, and SEO.

One free fix for any site

Add this single CSS rule:

html, body { overflow-x: hidden; }
@media (max-width: 640px) {
  button, a.btn { min-height: 44px; padding: 12px 18px; }
  input, textarea, select { font-size: 16px; }
}

Three lines of CSS that fix three of the eight problems above. Worth more than most "mobile audits" you'll buy.

Want a free mobile audit?

Send me your site URL at m2hgamerz.prince@gmail.com. I'll send back the top three mobile issues to fix. No obligation.