Start free trial
Fix guides

Fix: mobile — viewport, tap targets and font size

Fix the Viewport tag, Tap targets, Legible font size, CSS media queries, Nested tables and Frameset tags checks so pages work well on phones.

Updated Oct 24, 2026

Google indexes and ranks the mobile version of every page (mobile-first indexing). This guide fixes the checks in the report’s Mobile & usability section, plus the mobile items Lighthouse flags in + audits.

Find the affected checks in the app

  1. Open the audit report from Audits and go to Mobile & usability (see Read your audit score and report). Failing checks show in Issues to fix: Viewport tag is Critical; the others are Warnings.
  2. Local SEO audits (Run an audit) also measure Tap targets and Legible font size in a phone-sized browser (412 × 915 pixels).
  3. + audits: the Google Lighthouse section (switch to Mobile; you can run the same mobile test in PageSpeed Insights) can list “Does not have a meta viewport tag”, “Tap targets are not sized appropriately” / “Touch targets do not have sufficient size or spacing” and “Document doesn’t use legible font sizes”, depending on the Lighthouse version.

Viewport tag

How we detect it

The audit looks for a meta name="viewport" tag in the head. GEO and Local SEO audits also require width=device-width in its content. Missing = Critical.

Why it matters

Without a viewport tag, phones show a zoomed-out desktop page that people must pinch to read. Google treats the page as not mobile friendly.

Common causes

  • Very old theme or hand-built HTML without the tag.
  • A custom header template replaced the theme’s head and dropped the tag.
  • The tag exists but uses a fixed width (width=1024) instead of device-width.

Fix: basic

  1. View the page source (Ctrl+U) and search for viewport.
  2. WordPress: almost every theme adds it. If yours doesn’t, install WPCode (Code Snippets), go to Code Snippets › Header & Footer, paste the tag below into Header and save. Or switch to a modern responsive theme.
  3. Shopify: in Shopify admin go to Online Store › Themes › … › Edit code › layout/theme.liquid and check the tag is inside head.
  4. Webflow, Wix, Squarespace: the tag is added automatically. If the check fails, look for custom head code that overrides it (Webflow Page settings › Custom code; Wix: Wix dashboard › Settings › Custom code; Squarespace: your account › Settings › Advanced › Code Injection).

Fix: expert

Put this line in the head of every page, once:

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

Don’t add maximum-scale=1 or user-scalable=no: blocking zoom fails accessibility checks.

Platform steps

WordPress

  1. Classic themes: the tag is in header.php. Block themes output it automatically. Edit the theme only through a child theme, so updates don’t remove your change.

Shopify

  1. The line in theme.liquid should look exactly like the snippet above. Save.

Verify the fix

  1. View the source: one viewport tag with width=device-width.
  2. Open Chrome DevTools (F12), press Ctrl+Shift+M for device mode and choose a phone: the page should fit the screen without zooming.
  3. Click Run again on the audit in Audits. Viewport tag should pass.

Automation

Automatable with WordPress admin access via a header-code plugin, or Shopify theme access.

Tap targets

How we detect it

The Local SEO audit loads the page at phone size (412 pixels wide) and counts visible links and buttons smaller than 24 × 24 pixels. More than 3 small targets fails the check. Lighthouse (+ audits) checks the same thing (tap-targets, newer target-size).

Why it matters

Small or crowded targets cause mis-taps. Frustrated visitors leave, and call or booking buttons get fewer clicks.

Common causes

  • Footer links and social icons in tiny text, close together.
  • Inline text links in small paragraphs.
  • Icon-only buttons (close, menu, cart) with small hit areas.
  • Pagination numbers and breadcrumbs with no padding.

Fix: basic

  1. Open the page in Chrome DevTools device mode and tap through the footer, menu and buttons.
  2. In your page builder, increase button padding and icon size on the mobile breakpoint (Elementor: switch to the Mobile view at the bottom of the panel, select the element › Style › Padding).
  3. Put footer links in a list with space between them rather than one line.
  4. Make the phone number and main call to action full-width buttons on mobile.

Fix: expert

Give interactive elements a minimum size and spacing (48 × 48 pixels is a comfortable target; 24 × 24 is the minimum):

@media (max-width: 768px) {
  a, button, [role="button"], input[type="submit"] {
    min-height: 48px;
    min-width: 48px;
  }
  .footer-links a { display: inline-block; padding: 12px 8px; }
  .social-icons a { padding: 12px; margin: 0 4px; }
  p a { padding: 4px 0; } /* inline links: more line height instead */
  p { line-height: 1.6; }
}

Platform steps

WordPress

  1. In your WordPress admin, add the CSS in Appearance › Customize › Additional CSS (classic themes) or Appearance › Editor › Styles › Additional CSS (block themes). Publish.

Shopify

  1. In Shopify admin › Online Store › Themes › … › Edit code, add the CSS at the end of assets/base.css (Dawn and similar themes) or in Theme settings › Custom CSS. Save.

Wix

  1. Open your site from the Wix dashboard in the Editor, open the mobile editor (phone icon at the top), select each small element and enlarge it; mobile changes don’t affect desktop.

Verify the fix

  1. Re-test in DevTools device mode, or run Lighthouse with Mobile selected.
  2. Click Run again on the Local SEO audit in Audits. Tap targets should pass (3 or fewer small targets).

Automation

Assisted: CSS can be added automatically with WordPress admin or theme access, but a person should check the design.

Legible font size

How we detect it

The Local SEO audit measures the font size of the visible text at phone size. If more than 15% of the text is smaller than 12 pixels, the check fails. Lighthouse (+ audits) has the same check (font-size).

Why it matters

Small text forces people to zoom, and many leave instead.

Common causes

  • The theme sets body text to 12 to 14 pixels for all screens.
  • Footer, captions, cookie banners and legal text in very small fonts.
  • Fixed pixel sizes set for desktop, scaled down on mobile.

Fix: basic

  1. In the theme’s typography settings, set body text to 16 pixels for mobile (WordPress: Appearance › Customize › Typography, or Appearance › Editor › Styles › Typography in block themes; Elementor: Site Settings › Typography).
  2. Increase footer and caption text to at least 14 pixels.
  3. Check the cookie banner settings for a font-size option.

Fix: expert

html { -webkit-text-size-adjust: 100%; }
body { font-size: 16px; line-height: 1.6; }
small, .caption, .site-footer { font-size: 14px; }
@media (max-width: 768px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
}

Platform steps

Shopify

  1. In Shopify admin › Online Store › Themes › Customize › Theme settings › Typography: raise Body font scale to 100% or more. Save.

Squarespace

  1. In your Squarespace account, open the site › Website › Pages › Site Styles › Fonts: increase Paragraph sizes; check the mobile preview.

Verify the fix

  1. Click Run again on the Local SEO audit in Audits. Legible font size should pass (15% or less of text under 12 pixels).

Automation

Assisted: theme settings or CSS with WordPress admin or theme access; a person should review the result.

CSS media queries

How we detect it

The scanner checks whether the page’s CSS uses media queries (a sign of a responsive layout). If none are found, CSS media queries is flagged in Mobile & usability.

Why it matters

Media queries let the layout adapt to phone and tablet screens. A fixed desktop layout is hard to use on a phone.

Common causes

  • An old fixed-width theme or hand-built page.
  • All CSS loaded from a file the scanner could not read (blocked by a firewall).

Fix: basic

  1. Switch to a responsive theme (any current WordPress, Shopify, Webflow, Wix or Squarespace theme is responsive).
  2. If the site is responsive but the check fails, make sure CSS files are not blocked: open one CSS URL from the page source in a browser and check it loads. If it is blocked, see Fix: Site can’t be crawled.

Fix: expert

A minimal responsive pattern:

.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
img { max-width: 100%; height: auto; }

Platform steps

WordPress

  1. Test a theme first on a staging copy (many hosts have Staging in the panel, for example hPanel › WordPress › Staging).

Verify the fix

  1. Click Run again on the audit in Audits. CSS media queries should pass.

Automation

Manual: a theme change or layout rebuild.

Nested tables

How we detect it

The scanner flags Nested tables when a table is placed inside another table.

Why it matters

Tables inside tables are an old layout technique. They make the HTML heavy, are hard to read on phones and confuse screen readers.

Common causes

  • Old table-based page layouts.
  • HTML pasted from email templates or Word into the editor.

Fix: basic

  1. Edit the page and rebuild the layout with your editor’s columns or group blocks instead of tables.
  2. Keep tables only for real tabular data (prices, specifications, opening hours).

Fix: expert

Replace the layout table with CSS grid, and make data tables scroll on phones:

<div class="table-wrap">
  <table>
    <thead><tr><th>Service</th><th>Time</th></tr></thead>
    <tbody><tr><td>Boiler service</td><td>1 hour</td></tr></tbody>
  </table>
</div>
<style>.table-wrap { overflow-x: auto; }</style>

Platform steps

WordPress

  1. In the block editor, select the old content › Convert to blocks, then use Columns blocks for layout.

Verify the fix

  1. Click Run again. Nested tables should pass.

Automation

Manual: content rebuild.

Frameset tags

How we detect it

The scanner flags Frameset tags when the page is built with frameset or frame elements.

Why it matters

Frames hide content from search engines (each frame is a separate document) and break on phones.

Common causes

  • A very old site, or a “domain masking” / “frame forwarding” setting at the domain registrar that shows another site inside a frame.

Fix: basic

  1. If the domain uses frame or masked forwarding at the registrar, switch it to a permanent (301) redirect (see Fix: HTTPS, SSL and redirects), or point the domain’s DNS to the real host.
  2. If the site itself uses frames, rebuild it as normal pages.

Fix: expert

Replace the frameset page with a redirect while you rebuild (Apache .htaccess):

RewriteEngine On
RewriteCond %{HTTP_HOST} ^(www\.)?old-example\.com$ [NC]
RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L]

Platform steps

Domain registrar

  1. In the registrar’s panel (for example GoDaddy Domain › Forwarding, Namecheap Domain List › Manage › Redirect Domain), choose Permanent (301) and turn off Forward with masking.

Verify the fix

  1. Click Run again on the audit in Audits. Frameset tags should pass.

Automation

Assisted: registrar settings need registrar access; a rebuild is manual.

Common questions

Google retired its Mobile-Friendly Test. How do I check a page now?

Use the mobile checks in our audit report, Chrome DevTools device mode (press F12, then Ctrl+Shift+M) and Lighthouse in Chrome DevTools. Search Console no longer has a mobile usability report either, so the audit is the quickest check.

Why are Tap targets and Legible font size only in some audits?

They are measured in a real phone-sized browser (412 pixels wide) during the Local SEO audit. Other audits check the viewport tag and the scanner's mobile statistics.

Is a separate mobile site (m.example.com) still OK?

It works, but Google indexes the mobile version first and separate sites double the work. A responsive design on one URL is the recommended setup.

Still need help?

Ask in the chat inside the app, or send us a message on the contact page. You can also browse all help topics.