How to Check if Your Website Is Mobile Friendly
Google uses mobile-first indexing — meaning it crawls and ranks your site based on how it looks and performs on a mobile device, not on desktop. If your site isn't mobile friendly, you're not just losing mobile visitors. You're losing rankings across the board, on every device.
What Does "Mobile Friendly" Mean?
A mobile-friendly website adjusts its layout, font sizes, and interactive elements to work correctly on small screens. There are three key approaches:
Responsive design (recommended): The same HTML is served to all devices, but CSS adjusts the layout using media queries. This is what Google recommends.
Adaptive design: Different HTML is served to mobile vs desktop based on device detection.
Separate mobile site: A dedicated m. subdomain (e.g., m.example.com) serves mobile users. This is outdated and harder to maintain for SEO.
The technical foundation of mobile-friendliness is the viewport meta tag, which tells mobile browsers how to scale the page:
<meta name="viewport" content="width=device-width, initial-scale=1">Without this tag, mobile browsers render your site at desktop width and scale it down — making text tiny and forcing users to pinch-zoom. Google detects this absence and downgrades your mobile-friendliness score.
Why It Matters for SEO
How to Check Your Website's Mobile Friendliness
Clarity SEO's free Report Card checks for the viewport meta tag, assesses mobile layout signals, and grades your site's mobile readiness — all in one scan.
→ Check your mobile friendliness free with Clarity SEO
You can also use Google's official tools:
How to Fix It
For HTML/Generic
Step 1: Add the viewport meta tag.
This is the single most important mobile fix. Add it to the <head> of every page:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Your Page Title</title> </head>Step 2: Use responsive CSS with media queries.
/* Mobile-first base styles */ .container { width: 100%; padding: 0 16px; } /* Tablet and above */ @media (min-width: 768px) { .container { max-width: 768px; margin: 0 auto; } } /* Desktop */ @media (min-width: 1200px) { .container { max-width: 1200px; } }Step 3: Ensure touch targets are large enough.
Google requires interactive elements (buttons, links) to be at least 48×48 CSS pixels with 8px of space between them. Tiny links that require pinpoint tapping are a common mobile usability error.
/* Minimum touch target size */ a, button { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; }Step 4: Set readable base font size.
body { font-size: 16px; /* Never below 16px for body text on mobile */ line-height: 1.6; }Step 5: Avoid horizontal overflow.
* { box-sizing: border-box; } img, video, iframe { max-width: 100%; height: auto; }For WordPress
Modern WordPress themes (2020 and newer) are responsive by default. Check yours:
Common WordPress mobile issues:
overflow-x: auto to table wrappers via **Appearance → Customize → Additional CSS**.loading="lazy" on <img> tags) — WordPress adds this automatically since version 5.5.For Shopify
All Shopify themes are responsive by default. If your theme is custom or very old:
Common Shopify mobile issues:
% or vw units instead.For Wix / Squarespace / Webflow
Wix: Has a separate mobile editor. Go to Editor → Mobile View to preview and customise the mobile layout. Elements hidden on mobile won't affect SEO negatively, but content should be present.
Squarespace: Fully responsive by design. Use the Mobile Preview toggle in the editor. If content is misaligned, adjust section padding and image sizes in the Design panel.
Webflow: Design with breakpoints. Click the responsive icons in the top toolbar (Desktop → Tablet → Mobile Landscape → Mobile Portrait) and adjust layouts per breakpoint. Webflow's responsive system is highly capable but requires manual adjustment at each breakpoint.
Common Mistakes to Avoid
content="width=device-width, initial-scale=1, maximum-scale=1" disables user zoom — this is a mobile usability violation per Google's guidelines and an accessibility issue.FAQ
How do I know if my website is mobile friendly?
Use Google's Mobile-Friendly Test (search.google.com/test/mobile-friendly) or run a free scan with Clarity SEO. Both tools show a mobile preview of your site and list specific usability issues.
Does mobile-friendliness affect Google rankings?
Yes. Google uses mobile-first indexing, which means it evaluates the mobile version of your site for ranking purposes. A site that isn't mobile friendly will rank lower than an equivalent mobile-optimised competitor.
What is the viewport meta tag?
The viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">) tells mobile browsers how to scale and display the page. Without it, browsers render the desktop layout on mobile screens, forcing users to zoom and scroll sideways.
What is the minimum font size for mobile SEO?
Google recommends a minimum font size of 16px for body text on mobile. Smaller text is flagged as a mobile usability issue in Google Search Console.
Is my WordPress site automatically mobile friendly?
Most modern WordPress themes (released after 2016) are responsive. However, custom CSS, plugins that inject content, or embedded iframes can break mobile layout. Always verify with a mobile usability test.
Summary
Mobile-friendliness is no longer optional — it's how Google decides who ranks. Start with the viewport meta tag, use responsive CSS, ensure touch targets are large enough, and verify with a real device or emulator.
Check your site's mobile readiness right now with a free Clarity SEO scan.