How to Fix Content Wider Than Viewport on Mobile

errorThe Problem

Some elements on your page are wider than the mobile screen, causing horizontal scrolling. This creates a poor user experience and is flagged by Google as a mobile usability issue. Common causes: wide tables, large images without max-width, fixed-width elements, and iframes.

trending_upWhy It Matters for SEO

Horizontal scrolling on mobile is one of the clearest signals of a page not designed for mobile. Users struggle to read content, miss CTAs that are off-screen, and leave frustrated. Google uses this as a direct mobile usability signal that affects rankings.

buildHow to Fix It

/* Add to assets/base.css */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

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

table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

iframe, embed, object, video {
  max-width: 100%;
}

Related Fix Guides