[Resolved] Mobile usability issue

[Espen]

Hi,

I have a mobile usability issue I can’t seem to figure out.

Basically, when the post/page is run through the google mobile usability test, it comes back as green, but when looking at the screenshot, it looks like the tablet version of the page, not the mobile version. This triggers “content is wider than screen” errors in my google search console.

When I test the page on my mobile or with a simulated mobile in Chrome, it looks as it should.

It looks as if google is loading the CSS file, but at least 8 out of 10 times, it comes back rendering the “tablet” version of the page and not the mobile version.

I’ve been trying to figure this out for days, and I’m stuck. I’m really hoping you guys have come across something similar and have some suggestions. I’ve been experimenting with removing caching, letting Generatepress generate inline CSS etc, but I can’t seem to find the bug.

Url in private information.

Thank you!

-Espen

[Ying]

Hi Espen,

This triggers “content is wider than screen” errors in my google search console.

I don’t think that’s related. I just inspected your link, but I don’t see the content being wider than the screen issue.

I also did a lighthouse test for it, the screenshot it takes is correct (mobile version).

Any chance you can attach the test result you have?

You can upload it to https://postimages.org/ and share the link with us.

[Espen]

Hi Ying,

Thank you for the quick reply. And thank you for taking the time to look into this!

I’ve attached the screenshot from google’s Mobile Usability test. As you can see, the content is more like what we’d expect to see on a tablet. Wider and with a sidebar, instead of the mobile version, which should be one column.

It looks as if it passes the mobile usability test, but in my google search console, it gets marked as having “content wider than screen,” and when I try to reevaluate, it won’t let me. Instead it displays a notice that the page still has issues.

I have also tried the Lighthouse test, and it renders the page correctly. Same with my actual iPhone, webpagetest.org, and others.

This is what makes this really hard to debug, since I can’t seem to duplicate the issue anywhere except inside google’s mobile usability test.

-Espen

[Ying]

I don’t see the content is wider than the screen issue, and your site passed the test, so I don’t think you need to worry about it.

If it does have this issue, this CSS should fix it:

body {
    overflow-x: hidden;
}

[Espen]

Hi Ying,

Did you not see the screenshot I attached from Google Mobile Friendly Test?

If you see at the right-hand side of the first screenshot, the rendered view looks very much like it would on a tablet, with a sidebar.

I have now also attached a screenshot showing how it should look. This is from web.dev and uses Lighthouse. It renders correct with just one column with no sidebar.

Unfortunately, it’s Google indexing that matters, and Google Search Console is showing this page as not mobile-friendly.

I have attached the two screenshots in private information.

I’m hoping you don’t just dismiss this. I’m not a web developer, but I am a developer, and I know there is a problem here somewhere. I’m just not able to put my finger on it.

Best

Espen

[Ying]

Did you not see the screenshot I attached from Google Mobile Friendly Test?

I did, and as I said before, it should not be related to the issue, as even if it’s loading the tablet view, it’s still responsive and the content is not exceeding the screen. Hope I’ve made it clear.

Do you have any more info on the test result? As I can’t see or replicate the error.

[Espen]

Hi Ying,

No, I’m afraid I’m pretty much out of ideas. Like I said, Google search console has this page and others marked as not being Mobile Friendly. But, they come back as Mobile-friendly whenever I use the live test on the pages.

The only thing that has changed from before is that now Google’s rendering of the pages looks like the tablet view (with a sidebar), and not the expected mobile view like it used to look. If that is not related to the issues, then I have no idea what is causing the errors.

I have now reconfigured my caching plugin WP Rocket to let it inline used CSS, so that at least the test can’t fail because the CSS file wasn’t loaded properly.

I have asked Google to retest the URLs, so we’ll have to wait and see.

I am still really puzzled as to why the Google Smartphone, which uses a resolution of about 380 pixels and should trigger the mobile media CSS rules, is rendering the tablet view. I have not been able to find anyone who has had a similar issue, so it is truly baffling.

Anyway, thanks for trying to help!

-Espen

[Ying]

i went to Google search console and checked the definition of content wider than screen issue:

As you can see that means horizontal scrolling, but as I said before, I didn’t see a horizontal scrolling issue on your link, and also I gave you the CSS to fix the issue if it’s there somehow.

This issue is NOT related to the tablet view or mobile view, as long as there’s no horizontal scroll. 🙂

[Espen]

Hi Ying,

The latest tests came back from Google, and thankfully the mobile usability issues seem to be resolved. I’m still clueless about what caused the errors in the first place, but I guess changing the caching and inlining the CSS helped.

I’m marking this as resolved.

Thanks again!

Espen

[Ying]

You are welcome 🙂

Glad to hear that!

[lee]

I am also experiencing the same problem. Couldn’t find an answer. I changed it to inline css, but in the end it comes back to the same tablet screenshot form. I don’t know what the problem is.

[Espen]

Hi Lee,

Sorry to hear that you’re having the same issue. You are actually the first I’ve been able to find that has seen the tablet view instead of the expected mobile one! But I guess there are at least two of us then.

I have no idea whether it’s a Generatepress theme-specific occurrence or just Google doing weird stuff. In my case Google Search console came back with the all-clear after I let WP rocket inline the used CSS, but the pages are still rendering with the tablet view in the test.

I’m not sure the support staff will see your message here since this topic has been marked as resolved. I’d suggest starting a new support topic and linking this thread for reference.

Best of luck!

Espen

[Fernando]

Hi Lee,

Can you open a new support topic with regards to this?

[lee]

hi. Espen

I primarily solved the render problem today.

I removed wp rocket and upgraded PHP and DB to the latest version.

After that, the Render problem was solved.

However, the “content is wider than screen” errors were not resolved.

I would like to share my method with you.

thank you!

[Author]

Posts