7

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?

Improve this question
4
  • 1
    Have you tried fetch as Google in Search Console choosing the "mobile" option along with "fetch and render"?
    – Stephen Ostermiller ♦
    Commented Sep 20, 2018 at 10:41
  • 1
    Generally better to max-width: 100% and you shouldn't need to use overflow hidden since all your doing is band-aiding an issue you have.
    – Simon Hayter
    Commented Sep 20, 2018 at 13:41
  • I have received "Mobile-first indexing enabled", may be this helps, didn't do anything for it, may be support turn it on. For desktop I have max-width: 1200px, but still can use 100% for other media queries. Is goglebot clever enough to render media queries in css?
    – LeonidMew
    Commented Sep 20, 2018 at 15:21
  • Fetch as Google looks fine, without horizontal scroll. Added link to site to question.
    – LeonidMew
    Commented Sep 21, 2018 at 17:05

1 Answer 1

Reset to default
5

I have remove all "position: absolute" from classes. 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, sibmit it and in a 5 minutes you'l have crawled and indexed page. That helps a lot while searching a bug in template or css.

Edit: So the bug in position: absolute; even with width: 220px; it makes Google Search Console find error in page. Solution is to remove position: absolute and set it with javascipt again. In my case that was popup dialogues, and javascript was heeded to raise dialogues anyway. That javascript need to take in account window size.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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