Mobile responsiveness checker

The rule is parity, not similarity. Whatever a search engine is meant to see has to exist in the mobile rendering: the body text, the headings, the structured data, the images with their alt text, and the internal links that connect the page to the rest of the site. A desktop layout that carries a sidebar of related links which the mobile layout drops has quietly removed those links from the site's link graph.

Content inside tabs and accordions is fine. It is present in the markup, and hiding it behind an interaction for space reasons is a normal responsive pattern, not a penalty. What is not fine is content that is absent until an interaction fetches it, since nothing triggers that interaction on a crawl.

Separate mobile sites still exist and still work, with bidirectional canonical and alternate annotations kept correct in both directions and every change made twice. Almost nobody who has a choice chooses that now, and the technical checks assume one URL serving one document to every device.

Wide tables come top, because a table is the one element that refuses to reflow. Then embeds with hardcoded pixel dimensions, an old video iframe or a map that pushes the layout wider than the screen. Then images without a max-width rule, which do the same thing. Any one of these produces a page that scrolls sideways, and a single offending element is enough to do it to the whole document.

Text inputs under 16 pixels are the subtle one on iOS: the browser zooms in when the field is focused and does not zoom back out, leaving the visitor stranded at 150% on a form. Fixed elements are the other, where a sticky header, a floating chat button and a consent banner together can claim more than half of a small viewport and leave the content in the gap between them.

Test on a real device rather than a narrow browser window, or at minimum on a device profile with touch emulation and a throttled connection. A desktop browser resized to 400 pixels renders differently from a phone in ways that matter, and it never shows you the thing that actually decides the visit, which is how long the page took to become usable on a mobile connection.

The symptom is always the same: on a phone, the page scrolls sideways and everything renders slightly small. One element is wider than the screen, the browser has widened the whole document to hold it, and every other element is innocent. The job is to find the guilty one, and it takes four steps in any desktop browser's device mode set to a 375-pixel viewport.

Step one, confirm the viewport tag is present, because without it the entire page renders at desktop width and there is nothing to bisect. Step two, scroll to where the horizontal overflow is worst. Step three, in the element inspector, delete nodes from the top of the suspect region until the sideways scroll disappears; the node you just removed is the culprit. On a typical content site it takes under five minutes and finds one of three things: a data table with many columns, an embed with hardcoded dimensions, an old YouTube iframe carrying width 560 from its default embed code, or an image placed with explicit pixel sizing.

Each has a two-line fix. The table gets wrapped in a container that scrolls horizontally itself, so the table pans inside the page instead of stretching it. The iframe loses its fixed attributes in favour of a full-width rule with an aspect ratio, so it scales with the column. Images get a max-width of 100 percent site-wide, which most themes already have and one hand-placed image with an inline style can override.

Then check the fix where it actually lives: an article page, a category page and the search results page, not the homepage, because the culprit was inside content, and content renders through templates the redesign demo never showed. While there, look at what the small screen is left with once a sticky header and a consent banner are both up, and how the page feels on a throttled connection, since load time and layout are the two halves of the same phone visit that the technical audit measures together.

One warning about the tempting shortcut. Setting overflow-x hidden on the body makes the sideways scroll disappear in one line, and it fixes nothing: the wide element is still wider than the screen, its right edge is now silently cropped instead of reachable, and the next wide table or embed gets hidden the same way without anyone noticing. It is the layout equivalent of taping over a warning light. Fix the element that overflows, and leave the symptom visible so the next one announces itself the day it is published rather than in a report months later.