Mobile-responsive designWhat it checks and how to fix it

What it checks

Looks for signs of a responsive layout: a viewport meta tag, CSS media queries based on width, a responsive framework (Bootstrap, Tailwind, Foundation, Bulma), responsive images and flexbox or grid layouts. It flags a missing viewport tag and fixed widths of 1000px or more. Two or more signs with no issues pass; signs with issues or only one sign is a warning; no sign at all fails.

Why it matters

Most web traffic comes from phones, and Google indexes the mobile version of every page. A layout that does not adapt forces visitors to pinch and scroll sideways, which drives up bounce rates and hurts mobile rankings. Fixed pixel widths are the most common reason a page overflows a small screen.

How to fix it

Start with the viewport tag, then let the layout adapt with fluid widths and media queries.

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

/* Replace fixed widths */
.container { width: 1200px; }                          /* before */
.container { width: 100%; max-width: 1200px; margin: 0 auto; } /* after */

/* Stack columns on small screens */
.columns { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) {
  .columns { grid-template-columns: repeat(3, 1fr); }
}

img { max-width: 100%; height: auto; }

Test with the device toolbar in Chrome DevTools at 360px wide: nothing should scroll horizontally.