1

I have a number of pages which are failing the Google mobile friendly tests.

When viewed in the Mobile friendly tester two errors are reported:

  1. Clickable elements too close together
  2. Content wider than screen

It is this second issue "Content wider than screen" I'm having a problem with. If you inspect the page in Google Chrome -> Choose Google Pixel device, the content is scaled correctly to fit the viewport (411 pixels)

enter image description here

I cannot find a single element of the page which is wider than the viewport.

Another testing tool here reports the actual error, which says:

The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience. The page content is 1,092 CSS pixels wide, but the viewport is only 412 CSS pixels wide.

Again I can't find which element(s) on the page are greater than 412 pixels wide.

Could this be a false positive?

Or could it be a latency issue? What if my server isn't serving CSS fast enough for the mobile tester?

Any help appreciated.

1

This problem was resolved and was not a CSS issue or page layout issue, but a caching plugin AutoOptimize was combining Javascript and causing some scripts to run too late for the mobile tester to see the result.

So it was a false positive but resolved by tweaking caching settings.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.