The mobile pages that rendered as a single column of nothing

The mobile pages that rendered as a single column of nothing

A classifieds app's mobile rankings collapsed after a 'mobile-first' rebuild, even as desktop held steady. Mobile-first indexing meant this hurt everywhere.

Desktop fine, mobile broken — but the mobile site looked great on every phone we tested. So we rendered it at Googlebot's smartphone viewport with their resource constraints.

The rebuild used a JavaScript-based responsive system that read window.innerWidth at render time to decide which components to mount. On Googlebot's smartphone rendering, a race condition meant innerWidth read as 0 before layout settled — and the breakpoint logic mounted the 'unknown device' fallback: a stripped placeholder.

Google's mobile crawler captured the placeholder. Under mobile-first indexing, that placeholder became the canonical content for the whole URL — desktop included.

JS-driven responsive logic that depends on reading viewport dimensions at render is fragile on a crawler where layout timing differs from real browsers.

Fix: server-rendered a single semantic layout, CSS media queries handling responsiveness instead of JS branching.

Result: mobile content captured correctly, mobile rankings recovered plus desktop lifted 9%, total organic +37% in eight weeks.