The short answer
Open the page on a real phone in a private tab, in portrait and landscape, then on a second device. If it looks right there, your phone held an old saved copy. If it looks wrong everywhere, send us the page address, phone model and browser, plus a screenshot. Pop-ups and sticky bars are a common cause of covered content.
Why one site looks different on different screens
A website does not have one fixed layout. With responsive design, the same page rearranges itself depending on the width of the screen: three columns on a laptop, one stacked column on a phone. The rules for that, called breakpoints, say 'below this width, switch to the mobile arrangement'.
That is a lot of rearranging, and it is where mistakes show up. A long word, a wide table, a fixed-width image or an embedded video can push the page wider than the phone, so the whole page can be scrolled sideways. A layout can also work at the width of one popular phone and fail on a narrower or wider one.
The viewport: the invisible setting
Every responsive page includes a small line of code, the viewport tag, that tells a phone to use the real width of its screen. MDN's documentation explains what happens without it: mobile browsers may render the page in a virtual width such as 980 pixels and then shrink it to fit, so the page looks like a tiny desktop site and the mobile rules never apply.
A missing or altered viewport tag is rare on a site we build, but it can appear after a theme change or a plugin conflict. It produces the classic symptom: everything is present but tiny, with a lot of zooming needed. If that is what you see, say so in your report.
Common causes, and what each one looks like
| What you see | Likely cause | Who fixes it |
|---|---|---|
| The whole site looks like a shrunk desktop page | Viewport setting missing or overridden | Our team |
| Page scrolls sideways, text runs off screen | A wide image, table, button row or embed | Our team |
| Looks right on a laptop, wrong on your phone only | Old cached copy on the phone | You: private tab, clear site data |
| Content hidden behind a bar or box | Sticky header, chat widget, cookie bar or pop-up | Our team |
| Fonts or buttons too small to tap | Mobile sizes not set for that element | Our team |
| Only one browser looks wrong | A browser-specific quirk | Our team, with your report |
How to test properly
- 1Use a real phone, not only a narrowed desktop window. Real devices behave differently, especially with fixed bars and keyboards.
- 2Open the page in a private tab, so a saved copy cannot confuse the result. If it looks different there, see clear cache and refresh.
- 3Look at it in portrait and landscape. Some problems only appear when the phone is turned.
- 4Try a second browser, such as Safari and Chrome on the same phone, and one other device if you have it.
- 5Scroll the whole page slowly, not only the top. Many issues sit near a pop-up trigger or footer.
- 6Open any menu, form and pop-up. Check that you can close the pop-up and that the keyboard does not cover the form field you are typing in.
A narrowed desktop browser window is useful for a quick look, but it does not reproduce phone toolbars, notches or the on-screen keyboard. Treat it as a first pass and confirm on a real device.
Pop-ups, sticky bars and things on top
Many 'broken on mobile' reports are really something sitting on top of the page. A cookie banner that fills half a small screen, a sticky announcement bar, a floating chat bubble and a newsletter pop-up can stack up and leave a few lines of actual content. On a laptop, that is a small bar. On a phone, it can be most of the screen.
These are often added by different tools at different times, so nobody sees them together until a phone does. Tell us the order they appear in and which one you cannot dismiss. A pop-up that cannot be closed on a phone is a conversion problem as well as a design one, and it also affects how Google views the page, since Google crawls the mobile version of your site.
Does the mobile version matter for search?
Yes. Google states that it uses the mobile version of your site for indexing and ranking, and recommends that the mobile version contains the same content as the desktop one. Design can differ, such as content inside tabs, as long as the content is equivalent. So if text, images or headings exist on desktop and are missing on the phone, that content may not count in search. Mention it if you spot a gap.
For the wider picture on how speed interacts with phones, see my site is slow.
A worked example
Example: The button nobody could tap
A garden-centre owner hears from two customers that the 'Book a visit' button does nothing on their phones. On her own phone it works. A private tab on a customer's model shows why: a cookie banner and a sticky chat bar together cover the bottom third of the screen, and the button sits right behind them. The fix is not the button at all. We shorten the cookie banner on small screens and move the chat bubble above the bar. Her phone worked because she had accepted the cookie banner weeks before and it no longer appeared, so she never saw what new visitors saw. Always test as a first-time visitor in a private tab.
When to ask us
Ask when the same problem appears on more than one device, when a button, form or menu cannot be used, or when content is cut off or covered. You do not need to find the cause.
Send the exact page address, the phone model and the operating system version if you know it, the browser and whether it was a private tab, a screenshot or a short Loom video showing the problem including the address bar, whether portrait, landscape or both, and what you expected to see. Include whether it looks right on a laptop. Send it as one request through the support form, with media as Google Drive, Dropbox or Loom links. For text and layout edits you want rather than faults, use request a website update.
