Skip to content

Mobile-friendly test: see your page at five widths and what breaks

A free mobile-friendly test with screenshots at five widths and the element that breaks each layout, plus a Content-Security-Policy built from what your page really loads.

  • Free, no account
  • Results in under a minute
  • 5 widths from 360 to 1440 px

Example result:example-shop.hr

WordPress 6.8

Sample shop · homepage · mobile Chrome · the same check you get for your own site

Run it on your site
Mobile-friendly test + CSP generator
3 passed · 0 failed · 4 warnings. Biggest issue: Content-Security-Policy header is missing.The score counts only the 7 checks this tool shows, not the whole Best practices score of the full report.

Detected technology

  • WordPress 6.8
  • WooCommerce
  • Elementor
  • jQuery 1.12.4
  • LiteSpeed

Your page at five widths

4 of 5 scroll sideways
  • The page at 360 px wide (small phone)
    360 pxSmall phone
    864 px too wide14 small targets
  • The page at 414 px wide (large phone)
    414 pxLarge phone
    810 px too wide15 small targets
  • The page at 768 px wide (tablet)
    768 pxTablet
    456 px too wide15 small targets
  • The page at 1024 px wide (small laptop)
    1024 pxSmall laptop
    200 px too wide7 small targets
  • The page at 1440 px wide (desktop)
    1440 pxDesktop
    fits7 small targets
  • 360 px: img[src*="hero-large.png"] (864 px)
  • 414 px: img[src*="hero-large.png"] (810 px)
  • 768 px: img[src*="hero-large.png"] (456 px)
  • 1024 px: img[src*="hero-large.png"] (200 px)

Content-Security-Policy, built from this page

start in report-only mode
no CSP today1 inline script
The same policy, one directive per line
default-src 'self';
script-src 'self' 'sha256-DMSIJQXbuKuQ7nc/7yDTSFiTs7VlKqukpfaftGWQ+Ls=';
object-src 'none';
base-uri 'self';
form-action 'self';
frame-ancestors 'self'
  • 1 inline script is allowed by hash. If you change it, the hash changes: regenerate the policy or switch to a nonce set by your server.
  • Built from one page load. Scripts that load on click, on other pages or for logged-in users are not in it, so deploy it as Content-Security-Policy-Report-Only first and watch the reports for a week.

What we found

0 failed4 warnings3 passed
Show 3 passed checks

Fix these first

From the example above. Check your own site to get the fixes that apply to it.

  1. Warning: Content-Security-Policy header is missing

    A CSP blocks most cross-site scripting attacks by listing where scripts may load from.

    How to fix it: Start in report-only mode with Content-Security-Policy-Report-Only to see what would break.

  2. Warning: Other sites can embed this page in a frame

    A site that loads your page in an invisible frame can trick visitors into clicking your buttons (clickjacking), for example "confirm order" or "delete account".

    How to fix it: Add frame-ancestors 'self' to your Content-Security-Policy, or send X-Frame-Options: SAMEORIGIN.

  3. Warning: The page scrolls sideways on screens up to 1024 px wide

    When a page is wider than the phone, visitors have to pan left and right to read it, and Google counts it as not mobile-friendly.

    How to fix it: Find the element named in the technical detail and give it max-width:100% instead of a fixed width.

What the mobile-friendly test checks

Five real renders in Chromium, plus the headers and inline code that decide your CSP.

  • Sideways scrolling

    Loads the page at five widths from 360 to 1440 px and flags any that scroll sideways.

  • Viewport meta tag

    Checks phones display the page at their own width, which matters because Google ranks the mobile version.

  • Zoom on phones

    Checks visitors can pinch to zoom the page on their phone to read small text.

  • Tap target size

    Checks links and buttons are at least 24×24 px, so visitors don't mis-tap on phones.

  • Oversized images

    Finds images served at more than twice their displayed size, which wastes visitors' data.

  • Content-Security-Policy header

    Checks for the header that limits where scripts may load from, blocking most injected scripts.

  • Inline and wildcard scripts in CSP

    Checks your Content-Security-Policy doesn't still allow inline or wildcard scripts that weaken it.

  • Frame embedding protection

    Checks other sites can't load your page in a hidden frame to trick visitors into clicking.

  • Mixed content

    Finds files loaded over http:// on an HTTPS page, which browsers block or mark as not secure.

Show 5 more checks

How the mobile-friendly test and CSP generator work

  1. Render at five widths

    The page loads in Chromium once, then is resized to 360, 414, 768, 1024 and 1440 px. At each width we take a screenshot and measure the layout.

  2. Find what breaks

    We look for anything wider than the screen, text smaller than 12 px and tap targets smaller than 24 by 24 px, and name the elements responsible.

  3. Build the CSP

    Every script, style, image, font, frame and connection the page loaded is grouped by origin, inline scripts are hashed, and the result becomes a policy to start from.

Resizing one loaded page is close to, but not the same as, loading it on each device. The CSP covers one page load; test it in report-only mode before you enforce it.

Mobile-friendly test questions

Is Google's Mobile-Friendly Test still available?

No. Google retired the Mobile-Friendly Test, its API and the Mobile Usability report in Search Console on 1 December 2023, and points to Lighthouse instead. This tool is a free alternative for the same question: it renders your page at five widths from 360 to 1440 px and checks the viewport tag, zoom, sideways scrolling, text under 12 px and tap targets under 24 px.

How do I test if my website is mobile friendly?

Enter the address above. The page loads once in Chromium and is resized to 360, 414, 768, 1024 and 1440 px, with a screenshot at each width. Any width where the page scrolls sideways, text is too small or tap targets are too close is named with the element responsible. Also open the page on a real phone, because a resized browser is close but not identical.

Does mobile-friendliness affect Google rankings?

Yes, indirectly and strongly. Google uses mobile-first indexing, so it reads and ranks the mobile version of your page; text or links missing on mobile are missing for Google. Pages that are hard to use on a phone also lose visitors quickly. There is no separate mobile-friendly label any more, so a page simply has to work on small screens.

Why does my page scroll sideways on phones?

Almost always one element with a fixed width wider than the phone: a table, an image, an embed or a wide banner. The check names the element that sticks out at each width. Give it max-width: 100%, or wrap tables in a box with overflow-x: auto, and make sure the page has a viewport meta tag with width=device-width.

How do I test a Content-Security-Policy without breaking my site?

Send it as Content-Security-Policy-Report-Only first. The browser then reports every resource the policy would block, in the console and to a report endpoint if you set one, but blocks nothing. Browse your key pages, including forms and checkout, adjust the policy until no reports appear for a week or two, then rename the header to Content-Security-Policy.

How do I use the generated Content-Security-Policy?

Send it first as a Content-Security-Policy-Report-Only header. Browsers then report what the policy would block without blocking anything. Watch for a week, add the sources you missed, such as scripts on other pages or for logged-in users, and only then switch to the real header. On WordPress use a security plugin or the server config; on Cloudflare, a Transform Rule.

Why are inline scripts listed with hashes?

A CSP blocks inline scripts unless you allow them. A sha256 hash allows exactly that script and nothing else, which is far safer than unsafe-inline. Change one character of the script and the hash stops matching, so regenerate the policy after edits, or switch to nonces if your server can add a fresh one to every response.

Related free tools

All 59 tools →

Free, funded by the people who use it

No account, no paid plan. Donations keep it running.

Chip in