viewport not set high
Lighthouse: "Content is not sized correctly for the viewport"
The page has no responsive viewport meta tag, so phones render it at desktop width and force horizontal scrolling.
What you see
Content is not sized correctly for the viewport The viewport size of 980px does not match the window size of 412px. — or — Does not have a <meta name="viewport"> tag with width or initial-scale
What’s actually happening
On a phone the whole page looks zoomed out, text is tiny, and you have to pinch and drag sideways to read anything. Lighthouse flags it under SEO and Best Practices, and the mobile screenshot in the report shows content bleeding past the right edge. Google Search Console may also report "Content wider than screen" in the Mobile Usability section.
Common causes
- No <meta name="viewport"> tag at all, so mobile browsers fall back to a 980px virtual viewport.
- A fixed-width viewport like <meta name="viewport" content="width=1024"> that pins layout to a desktop width.
- A layout built in absolute pixels (fixed-width container, e.g. width: 960px) that ignores the device width even when the meta tag is present.
- user-scalable=no or maximum-scale=1 combined with a non-responsive layout, which blocks the reflow that would otherwise help.
- An element wider than the screen (an unconstrained image, a wide <table>, or a long unbroken string) pushing the body past the viewport width.
How to fix it
- Add the responsive viewport meta tagPut <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head> of every page. width=device-width tells the browser to match the layout viewport to the actual screen width; initial-scale=1 sets the starting zoom to 100%.
- Remove fixed pixel widths from the top-level layoutSwap width: 960px on wrappers for max-width: 960px; width: 100%. Anything that says a hard pixel width on a container is a candidate to break narrow screens.
- Find the element causing overflowIn DevTools run document.querySelectorAll('*').forEach(e=>{if(e.scrollWidth>document.documentElement.clientWidth)console.log(e)}) to list nodes wider than the viewport. Usual suspects: an <img> without max-width:100%, a wide table, or a <pre> block.
- Don't disable zoomDrop user-scalable=no and maximum-scale. Blocking pinch-zoom is an accessibility failure and doesn't fix the underlying layout width.
- Re-test at 360pxReload Lighthouse in mobile mode, or set DevTools device toolbar to a 360px-wide phone. The horizontal scrollbar should be gone and the audit should pass.
Stop it recurring
Ship the viewport meta tag in your base template and add a 360px-wide check to your responsive QA so a stray fixed width gets caught before deploy.
Related errors