Playbook
    mobile
    medium

    Fix a mobile-friendly test failure

    Google says your page is not mobile-friendly. Here are the four issues that cause 95% of failures and how to fix each.

    30 minutesLast reviewed 2026-06-09

    What is happening

    Google's mobile-first index ranks the mobile version of your site. If it is not mobile-friendly, you drop in mobile search results — which is now ~65% of all traffic.

    The four issues that cause 95% of failures

  1. Missing viewport meta tag. Add <meta name="viewport" content="width=device-width, initial-scale=1"> to every page's <head>.
  2. Text smaller than 16px. Set the body font-size: 16px; minimum. Anything smaller triggers Safari/Chrome auto-zoom on form inputs.
  3. Tap targets smaller than 44×44px. Buttons and links need a minimum 44×44 touch area with at least 8px between them.
  4. Horizontal scrolling. A single oversized image or unflexible table causes the whole page to scroll sideways. Wrap tables in <div style="overflow-x: auto"> and set max-width: 100%; height: auto; on every image.

    5. Test fast

  5. Open the page on your phone and rotate to portrait. Anything off-screen is a bug.
  6. Chrome DevTools → device toolbar → iPhone SE (375px wide). If it works there, it works everywhere modern.

    7. Common gotchas

  7. Fixed widths in CSS. Search for width: 1200px or similar. Replace with max-width: 1200px so it shrinks below that breakpoint.
  8. Modal/popup uses fixed positioning that breaks scroll. Use position: fixed; inset: 0; overflow-y: auto; instead of top/left/right/bottom literals.
  9. Form inputs missing `autocomplete` and proper `type`. Mobile keyboards show the wrong layout (e.g. desktop keyboard for an email field).

    10. What this doesn't do

    This focuses on Google's mobile-friendly test. For full mobile UX (PWA, offline, install prompts), see PWA readiness guide.

    All playbooks