How do I know if my website is mobile-friendly?

More than half of all web traffic now comes from phones. For local service businesses — plumbers, contractors, consultants, clinics — the number is often higher, because someone searching "roofer near me" is usually on their phone while standing in their driveway looking at the damage.

That means if your website is broken on mobile, you are losing leads before they even read what you do. The problem is that most business owners check their site on a laptop, see that it looks fine, and assume the phone experience is the same. It usually is not.

What mobile-friendly actually means

A mobile-friendly website does four things correctly:

• It fits the screen without horizontal scrolling. Content stacks vertically and stays within the viewport width. Nothing overflows.
• Text is readable without pinching to zoom. Body text should be at least 16px. Navigation labels and small print should be at least 14px.
• Buttons and links are large enough to tap reliably. Google recommends a minimum tap target of 48×48 pixels. A link that is technically there but requires precise finger placement fails this.
• Key features work on touch. Contact forms submit. Phone numbers are tap-to-call. Menus open and close with a tap, not a hover.

A site can pass the visual test — looks fine on a phone screen — and still fail on all four of these. That is the gap most business owners do not catch.

How to check your site right now

1. Use a real phone and actually try things

Open your site on your phone and go through it as a customer would. Tap your contact form and fill it out. Try calling your phone number from the site. Open the menu. Read your services page from top to bottom. Look for anything that requires pinching, sideways scrolling, precise tapping, or that just does not work.

This is the most honest test because it uses the device your customers use. A simulator cannot replicate the exact feel of finger-sized tap targets or the actual network speed your customers experience.

2. Check Chrome DevTools at multiple widths

On a desktop or laptop: open Chrome, go to your website, press F12 (or right-click → Inspect), and click the device toggle icon in the top left of the DevTools panel. This switches the browser to simulate a mobile screen. Set the width to 375 (iPhone SE / most common small phone), 390 (iPhone 14), and 412 (Android mid-range). Scroll through every page at each width and look for anything that overflows or breaks.

This catches layout problems that only appear at specific screen sizes — content that works at 390 but breaks at 375 is common on sites where sizes were tested on one device.

3. Check Google Search Console

If your site is verified in Google Search Console (it should be — it is free), go to Experience → Mobile Usability. Google lists every URL on your site where it detected a mobile problem: text too small to read, clickable elements too close together, content wider than screen, viewport not set. These are the exact issues that affect your search rankings.

If you have not set up Search Console yet, this is a good reason to. It takes 10 minutes to verify and gives you direct visibility into how Google sees your site.

The four most common mobile failures on small business sites

1. No viewport meta tag

The viewport tag tells the phone how to scale your site. Without it, mobile browsers render a full desktop-width version and then shrink it to fit — which makes everything tiny and forces the user to pinch to zoom. The fix is one line of HTML in the head of your page: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Most modern site builders add this automatically, but older template-based sites and hand-coded sites from before 2015 often omit it.

2. Fixed-width layout elements

A container set to width: 960px in CSS will overflow a 375px phone screen and create horizontal scrolling. The fix is to change fixed pixel widths to percentage-based or max-width values: max-width: 960px; width: 100%. This is the most common layout failure on hand-coded sites that were built before responsive design became standard.

3. Images that do not scale

An image without max-width: 100% in CSS will display at its natural pixel width and overflow the screen on mobile. This is usually visible as a wide image that forces horizontal scrolling on one or two pages. The fix is a single CSS rule applied globally: img { max-width: 100%; height: auto; }. Most modern frameworks include this by default; older sites often do not.

4. Navigation that relies on hover

A dropdown menu that reveals sub-items on mouse hover does not work on a touchscreen — there is no hover state. If your navigation uses hover-triggered dropdowns, they are either broken on mobile or require a double-tap pattern that most visitors will not discover. The fix is to restructure the menu so sub-items are visible on a single tap, or to use a mobile-specific menu pattern (hamburger icon → slide-in nav) that works with touch.

What to do if you find problems

Triage by impact on leads. A broken contact form on mobile is a direct revenue problem — fix it first. Text that is slightly small is an annoyance — fix it eventually. A horizontal scroll on the footer is cosmetic — schedule it.

For platform-based sites (Squarespace, Wix, Webflow), most mobile fixes are settings in the editor. Look for responsive settings, mobile view, or breakpoint controls in your platform's design panel. For custom-coded sites, the fixes are CSS changes and should be handled by your developer or designer.

If you are not sure which category your problems fall into, a site audit will go through your mobile experience in detail — and tell you which issues are code-level, which are platform settings, and which are fixable without a developer.

FAQ

Does Google care if my website is mobile-friendly?

Yes — Google uses mobile-first indexing, which means it crawls and ranks your site based on the mobile version, not the desktop version. If your site is broken or slow on phones, your search rankings suffer even for desktop visitors. This has been Google's default since 2019 and applies to virtually all sites currently indexed.

What is the fastest way to check if my site is mobile-friendly?

Open your site on a real phone and use it as a customer would — fill out the contact form, tap your phone number, navigate the menu. Then supplement with Chrome DevTools at 375px to catch layout problems that do not show at your phone's exact width. Google Search Console's Mobile Usability report shows you the issues Google has already flagged.

My site looks fine on my phone. Does that mean it is mobile-friendly?

Not necessarily. Your phone might be a newer model at a common width, while the site breaks at narrower sizes. Visual appearance also does not catch functional problems — a form that looks right but does not submit, a number that is not tap-to-call, or a button that is visible but too small to tap are mobile failures that a glance misses. Test at 375px and actually try the key actions.

What causes a website to not be mobile-friendly?

The four most common causes: a missing viewport meta tag, fixed pixel widths on layout containers, images without a max-width rule, and hover-only navigation menus. Older sites built before 2015 and sites on outdated templates tend to have multiple of these at once. Each has a specific, targeted fix.

Can I fix a mobile problem myself or do I need a designer?

Depends on the platform. Squarespace, Wix, and modern WordPress themes let you adjust mobile layout through the editor without touching code. If the problem is a fixed-width layout in custom HTML or CSS, you need someone comfortable with CSS media queries. The viewport meta tag fix — adding one line of HTML — is something most people can do with clear instructions.