How to Fix Mobile Usability Errors in Google Search Console

Google Search Console’s Mobile Usability report identifies issues that make your pages difficult to use on mobile devices. These errors can hurt rankings and user experience.

Here’s how to fix each mobile usability error.

Understanding Mobile Usability Errors

Google tests your pages on a mobile viewport and reports issues that affect usability. Common errors include:

Text too small to read
Clickable elements too close together
Content wider than screen
Viewport not set or set incorrectly
Viewport not configured for “device-width”

Finding Mobile Usability Errors

In Search Console

Go to Google Search Console
Navigate to Experience > Mobile Usability
Review errors and affected pages

In PageSpeed Insights

Run your URL and check:

Mobile score
“Avoid small tap targets” diagnostic
Viewport configuration

Error #1: Text Too Small to Read

What It Means

Font sizes on mobile should be readable without zooming. Google expects:

Body text at least 16px
Text readable at default zoom

Common Causes

Fixed small font sizes
Not scaling fonts for mobile
Using viewport that prevents zoom

How to Fix

Set base font size:

html {
  font-size: 16px;
}

body {
  font-size: 1rem; /* = 16px */
  line-height: 1.6;
}

Scale properly on mobile:

/* Don't make text smaller on mobile */
@media (max-width: 768px) {
  body {
    font-size: 1rem; /* Keep at 16px minimum */
  }
}

Use relative units:

/* Good - scales properly */
p { font-size: 1rem; }
h1 { font-size: 2rem; }

/* Avoid - doesn't scale well */
p { font-size: 14px; } /* Too small */

Quick Checklist

Base font 16px or larger
Using rem/em instead of px
Line height 1.5-1.7
No small print below 12px

Error #2: Clickable Elements Too Close Together

What It Means

Buttons, links, and form elements are too close together, making them hard to tap accurately.

Google’s Guidelines

Tap targets should be at least 48×48 CSS pixels
At least 8px spacing between targets
Adequate spacing around all interactive elements

Common Causes

Small buttons
Links too close in lists
Form inputs bunched together
Navigation items cramped

How to Fix

Increase button size:

/* Minimum 48px tap target */
button, 
.button,
a.cta {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
}

Add spacing between links:

/* List items with links */
nav ul li {
  margin-bottom: 8px;
}

nav ul li a {
  display: block;
  padding: 12px;
}

Form elements:

input,
select,
textarea {
  min-height: 48px;
  padding: 12px;
  margin-bottom: 16px;
}

input[type="checkbox"],
input[type="radio"] {
  min-width: 24px;
  min-height: 24px;
  margin-right: 12px;
}

Footer links:

footer nav a {
  display: inline-block;
  padding: 12px;
  margin: 4px;
}

Visual Test

Draw 48×48 boxes around tap targets. They shouldn’t overlap:

[     Button A     ] [     Button B     ]
        ↑ 8px gap ↑

Error #3: Content Wider Than Screen

What It Means

Page content extends beyond the viewport width, causing horizontal scrolling.

Common Causes

Fixed-width elements
Large unresponsive images
Tables that don’t fit
CSS that creates overflow
Pre-formatted code blocks

How to Fix

Prevent overflow globally:

html, body {
  overflow-x: hidden;
}

* {
  max-width: 100%;
  box-sizing: border-box;
}

Responsive images:

img, video, iframe {
  max-width: 100%;
  height: auto;
}

Responsive tables:

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  min-width: 100%;
}

Code blocks:

pre, code {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
}

Avoid fixed widths:

/* Bad */
.container { width: 1200px; }

/* Good */
.container { 
  width: 100%;
  max-width: 1200px;
}

Finding the Culprit

In Chrome DevTools:

Open Elements panel
Select <html> element
Look for elements extending beyond viewport
Check computed width of suspicious elements

Error #4: Viewport Not Set

What It Means

Your page is missing the viewport meta tag, so browsers show a zoomed-out desktop view.

How to Fix

Add viewport meta tag:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Required on every page - if you have a layout template, ensure it’s in the template.

Error #5: Viewport Not Configured for Device-Width

What It Means

Your viewport tag exists but doesn’t include width=device-width.

Incorrect Examples

<!-- Missing device-width -->
<meta name="viewport" content="initial-scale=1">

<!-- Fixed width -->
<meta name="viewport" content="width=980">

<!-- Only minimum scale -->
<meta name="viewport" content="minimum-scale=1">

Correct Format

<meta name="viewport" content="width=device-width, initial-scale=1">

What NOT to Include

<!-- Don't disable zoom - bad for accessibility -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Testing Mobile Usability

Chrome DevTools

Open DevTools (F12)
Toggle device toolbar (Ctrl+Shift+M)
Select mobile device
Check for issues:
- Text readability
- Tap target sizes
- Horizontal scrolling

Lighthouse Mobile Audit

Open DevTools
Go to Lighthouse tab
Select Mobile
Run audit
Check Accessibility > Tap targets

Real Device Testing

Test on actual phones:

iPhone SE (small screen)
Standard iPhone
Android devices
Different browsers (Safari, Chrome)

Fixing Multiple Pages

Systematic Approach

Export affected URLs from Search Console
Group by template - many issues share same cause
Fix template - fixes all pages using it
Request validation in Search Console

Request Validation

After fixing:

Go to Mobile Usability report
Click the issue
Click “Validate Fix”
Google will re-crawl and verify

Timeline

Validation can take days to weeks
Large sites take longer
Fix template issues first for faster results

Prevention Best Practices

Mobile-First CSS

Start with mobile styles, add desktop:

/* Mobile (default) */
.container { padding: 1rem; }
.button { padding: 12px 24px; }

/* Desktop */
@media (min-width: 768px) {
  .container { padding: 2rem; }
}

CSS Framework Defaults

Most frameworks include good defaults:

Tailwind CSS
Bootstrap
Foundation

But still verify on actual mobile devices.

Continuous Monitoring

Check Search Console monthly
Test new pages before publishing
Include mobile tests in QA process

Checklist for Mobile-Friendly Pages

Viewport

Viewport meta tag present
width=device-width set
initial-scale=1 set
User zooming not disabled

Typography

Body text ≥ 16px
Adequate line height (1.5-1.7)
Using relative units (rem/em)
No tiny fine print

Tap Targets

Buttons ≥ 48×48px
Links have adequate padding
8px+ spacing between targets
Form inputs properly sized

Layout

No horizontal scrolling
Images responsive
Tables scroll or stack
Code blocks don’t overflow

Testing

Tested on real mobile device
Lighthouse mobile audit passed
Search Console shows no errors

Related Resources:

Understanding Mobile Usability Errors

Finding Mobile Usability Errors

In Search Console

In PageSpeed Insights

Error #1: Text Too Small to Read

What It Means

Common Causes

How to Fix

Quick Checklist

Error #2: Clickable Elements Too Close Together

What It Means

Google’s Guidelines

Common Causes

How to Fix

Visual Test

Error #3: Content Wider Than Screen

What It Means

Common Causes

How to Fix

Finding the Culprit

Error #4: Viewport Not Set

What It Means

How to Fix

Error #5: Viewport Not Configured for Device-Width

What It Means

Incorrect Examples

Correct Format

What NOT to Include

Testing Mobile Usability

Chrome DevTools

Lighthouse Mobile Audit

Real Device Testing

Fixing Multiple Pages

Systematic Approach

Request Validation

Timeline

Prevention Best Practices

Mobile-First CSS

CSS Framework Defaults

Continuous Monitoring

Checklist for Mobile-Friendly Pages

Viewport

Typography

Tap Targets

Layout

Testing

Tags:

Share this article:

Ready to improve your SEO?