Passing the Google Mobile Site Test - Step 2 - Fix "Content Wider Than Screen" Error

I'm working to get this blog site to pass the Google mobile friendly site test. In the last post I fixed the viewport. In this post I'm going to fix the "Content wider than screen" warning.

Switching Chrome into developer tools mode (press F12 on Windows), and choosing the device emulator, the problem becomes clear with the page scrolling beyond the right edge of the screen.

Continuing to use the Chrome dev tools I start looking for the styling culprit. A quick scan finds several width: 800px; attributes set in the style sheets. Looking at how the page works it is clear that max-width is more appropriate than forcing a width value. I did a find and replace in all my css template files to replace width with max-width.

A quick commit and republish and the page looks fine on mobile and Google has given me a tick in the box.