[Resolved] Fix for “mobile content wider than screen” report by google

[Michael]

Hi. For some reason, our home page is being flagged now by Google’s Mobile Usability review as, “The following issues were found on your site:
Content wider than screen”. The page’s overall GB container — in all desktop/tablet/mobile view modes — is set to full-width. How could we have this issue then?

I do notice though that as I scroll the home page downward on a mobile device, a small amount of horizontal shift of the page is possible. Could this be related? Or is it just an artifact of my Google 4+ screen’s proportions?

What’s the fix? Thanks.

[Ying]

Hi Michael,

You have negative margin set for the buttonsblock on mobile:
https://www.screencast.com/t/tLNvcIJUy2

Remove the negative margin, the issue should be fixed.

[Michael]

Awesome. Solved! Thank you so much.

[Ying]

No problem 🙂

[Michael]

Actually, no longer resolved… Google reported today that there is still the problem — just in two pages though, our home page and https://whatcommilliontrees.org/about-whatcom-million-trees-project/ Looking at all left/right margins, I don’t see any negative values. Do you? If not, then what else could be the issue? Thanks.

[Leo]

Can’t see anything obvious on those pages.

Do you still have a staging site set up?

If so can you try disabling all plugins except GP Premium and GB there to see if the issue still exists?

[Michael]

Thanks for your reply, Leo. The staging site intentionally isn’t visible to google. And even if it was added tonight to google search console, it might be weeks before google would report the problem. True?

[Ying]

I checked the about us page and see an obvious negative margin set for a container:
https://www.screencast.com/t/sagoMkWjsnQo

Check all the elements to see if there’s any other negative margin applied on mobile.

[Michael]

Nice catch Ying. 🙂 Somehow I missed that one. Searching the home page for every container in mobile view, there were two that were -1 on the right. Maybe that was triggering it there. Thanks. I’ll mark this resolved again unless Google still reports a problem.

[Ying]

You are welcome 🙂

[Michael]

Darn, Google reported just now that there are still mobile “too-wide” problems with those two pages. Anything else that could trigger this issue other than negative margins?

[David]

Hi there,

just a pointer – what you may be seeing as a false positive from Googles mobile usability testing.
First thing to do is to check the site on a real device and ask some other users to…. Leo and I can confirm it looks good to us. And we both reside on different continents which is a great test to do.

So why the false positive? Google Bot cannot always load 100% of the necessary resources to render the page correctly. Sometimes that is because:
a) the Resources are being blocked by the sites robots.txt ( i checked your site and that is not the case ),
b) a cached CSS file is causing an issue and clearing those caches ( such as Autoptimize ) may resolve it.
c) google bots resources are under great demand at the time of testing and the crawl quota budget it allocates to testing your site is not enough to load all the necessary resources such as style sheets to render the page correctly. Leading to Content too wide, text too small, clickable elements to close together issues being reported.

What to do?
If you’re only seeing a couple of mobile usability issues being reported, i would ignore it and run a mobile friendly test on the site in a couple of days.

If ALL or the majority of your URLs are failing mobile unability then the site needs some better optimization.

[Michael]

Okay, thanks David for the comprehensive explanation. I will clear caches again and run the mobile test in a few days. I’m most worried about our Home page… it looks/works fine on mobile (as you saw) but I’m concerned that this issue will keep Google organic search from ranking it very high.

[Longinos]

Hi Michael, and sorry for spaming this….
In search console when you do a “URL inpection” you can see a link “View tested page”, when click on it, you see a rigth panel with the html code, a image and a link “More info”, in his one you can see “Page resources”. Normally googlebot lack to load some css and js resources and the page don´t render as it do to a normal user. Some times throw the wider than screen or buttons are too close or some like that, but all related to don´t load a css resource.
Try to inspect the url until all resources are loaded.

[David]

Just for some peace of mind – have a listen to John Mullers response here:

https://generatepress.com/forums/topic/mobile-friendly-2/#post-2049852

[Author]

Posts