Is My Website Mobile Friendly? Free Test and How to Fix Issues

Updated March 2026 · 5 min read

Over 60% of all web traffic comes from mobile devices. Google has used mobile-first indexing since 2019, which means Google judges your site based on its mobile version first. If your site doesn't work well on phones, your rankings suffer — even in desktop search results.

Test your site's mobile readiness:

Free Mobile Check →

What "mobile friendly" actually means

A mobile-friendly website isn't just one that "sort of works" on a phone. Google checks for specific technical criteria:

Viewport meta tag — tells mobile browsers how to scale the page. Without it, your site renders at desktop width and users have to pinch-zoom.
Responsive design — content adapts to different screen sizes. No horizontal scrolling required.
Tap targets — buttons and links need to be at least 48x48 pixels with 8px spacing. Smaller targets cause mis-taps and frustration.
Readable text — font sizes should be at least 16px on mobile without requiring zoom.
No intrusive interstitials — full-screen popups that block content on mobile are penalised by Google.

Common mobile issues and how to fix them

Missing viewport meta tag

This is the single most important mobile fix. Without it, nothing else matters — the browser doesn't know to render at mobile width.

Fix: Add this to your page's <head> section:

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

Most modern CMS platforms add this automatically. If yours doesn't, add it to your theme's header template.

Tap targets too small

This often happens in navigation menus, footers, and form inputs. Links crammed together are impossible to tap accurately on a phone.

Fix: Add padding to clickable elements. In your CSS:

a, button { padding: 12px 8px; min-height: 48px; }

Text too small to read

If your base font size is 12px or 14px, mobile users have to zoom in to read anything.

Fix: Set your base font size to at least 16px: body { font-size: 16px; }

Fixed-width elements causing horizontal scroll

Images or tables with fixed pixel widths wider than the screen force horizontal scrolling on mobile.

Fix: Use max-width: 100% on images and tables so they never exceed the screen width.

Content wider than the screen

This is usually caused by absolute-positioned elements, fixed-width containers, or unresponsive iframes (like embedded maps or videos).

Fix for iframes: Wrap them in a responsive container:

.responsive-embed { position: relative; width: 100%; padding-bottom: 56.25%; } .responsive-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Testing mobile friendliness

The quickest way to test is to run a SiteBeat scan — our mobile readiness check is one of the six categories in your health report. We check viewport configuration, tap target sizing, font readability, and responsive behaviour.

You can also do a quick manual check: open your site on your phone. Can you read everything without zooming? Can you tap every link and button without accidentally hitting the wrong one? Does the page scroll only vertically, never horizontally?

Check your mobile readiness score:

Free Mobile Friendly Test →