Search code examples
cssmobile-websitegoogle-search-console

Google Mobile Usability > Content wider than screen

Unable to fix error Google Mobile Usability > Content wider than screen in Google Search Console. I have try chrome mobile layout emulator from DevTools, set width to 320px but no horizontal scroll appears. So, all looks fine in emulator but google raises error. Then, I have add to css:

@media screen {
  html, body {
    width:      100%; 
    overflow-x: hidden;
  }...

But no effect, error still persist.

Test Live URL tool don't show any error, all pages mobile friendly.

Any idea how to fix this? I'm sure this is google bug, but how to avoid it?

Solution

  • I have remove all "position: absolute" from classes, doesn't matter if absolute element fits on small screen fine. But that classes were assigned to hidden content what fit fine on smallest smartphone screen, also most of them were not connected to any page element, because elements were password protected.

    I found a way to quicker render pages, not waiting long time after clicking "request indexing". First create new page, using site template and css, text on page should be unique(Lorem Ipsum Generator help with that). Second, create one more sitemap file with only one url pointing to new file, submit it and in a 5 minutes you'll have crawled and indexed page. That helps a lot while searching a bug in template or css.

    Edit: Since removing absolute position broke UI design, I set it back with javascript.