4

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?

  • 1
    Have you tried fetch as Google in Search Console choosing the "mobile" option along with "fetch and render"? – Stephen Ostermiller Sep 20 '18 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 Sep 20 '18 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 Sep 20 '18 at 15:21
  • Fetch as Google looks fine, without horizontal scroll. Added link to site to question. – LeonidMew Sep 21 '18 at 17:05
  • @StephenOstermiller Please help to fix it. Im totally stuck with this bug. 3 tools shows page fine: fetch and render, test live url in new search console, chrome devtools mobile layout emulator. Tried to remove page parts, to see where bug can be, but this is to slow, because of waiting for google to re-index page. Will start a bounty for an answer. – LeonidMew Sep 22 '18 at 9:05
3

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.

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.