Mobile Usability - Content wider than screen

Hi there,

a ran a few mobile friendly tests and get varying results - some pass, some fail with text too small to read, and some fail with content too wide.

Try disabling the autoptimize cache, and retest - as all tests are showing loading issues ( whether they pass or fail ) and most of them are Google not loading the relevant style sheets.

Hi David,

As google now more focussing good page score on web vitals, autoptimize seems to help to improve the score.
We are using cloudflare + wp rocket + autoptimize.

Cant any see any options in autoptimize settings to disable cache. The only option I could see is it delete cache, which I did few times.

Hi there,

Cant any see any options in autoptimize settings to disable cache. The only option I could see is it delete cache, which I did few times.

You can disable caching by disabling the plugin itself. :)

I have disabled autoptimize, cleared cloudflare and wp rocket cache.
Still have the same issue.

https://support.google.com/webmasters/thread/4425254/google-searchbot-page-resources-couldn-t-be-loaded-other-error?hl=en

Don't think related to loading issues.

That link you provided was part of the research we performed when writing this doc:

https://docs.generatepress.com/article/text-too-small-to-read-and-clickable-elements-too-close-together/

The ambiguous Other error is simply a result of the Google not being able to load all the necessary resources.
General fix is better optimization of the site. Problem here is the site is well optimized going by the Google PSI reports. An on most tests i perform using Mobile Friendly it passes .... yet to have the Content Too Wide issue.

So back to why does it 'play up' on Classic editor pages - odd one here as there aren't specific style sheets ( aside from Block specific CSS ) for the two editor modes ... so the thought that there was a stylesheet conflict stuck in the cache or CDN doesn't seem a likely cause.

Makes it really difficult to debug... however there is a possibility that older files are cached in the CDN - you could try disabling or re-propagating the CDN to see if that is the cause.

Hi David,

Tried to disable CDN by bypassing traffic to the direct origin server. That did bring any changes.

So far tested disabling autoptimize and Cloudflare, Both didnt help.

What else we could try? So strange converting format from classic to Gutenberg blocks format fix the problem.
But the pain we have 100's of blog posts in classic format. The blog posts which are in Gutenberg block format don't show any problem in GSC.

Can you share a link to a new post that doesn't have the mobile friendly failure ? I can take a look to see if there are any obvious differences between the two - because i am at a complete loss as to why the failures are occurring

hi David,

Link added which is looking good

Comparing a classic and block editor page, as i expected there is no difference to the request being made to the server. All CSS and JS requests are identical. Doing a side by side comparison network test on a 3g Network the Classic post actually outperforms the Block post ( Blocks does have slightly more HTML and a couple of more requests ):

https://www.webpagetest.org/video/compare.php?tests=210515_BiDcCR_c11e1da8ca7f45b89d76cdedddbc2b78,210515_BiDcKD_0ae5666f96975891ae9a7c33e58e7a37

So fundamentally there is nothing different between the two types of post that is causing the issue.

The only thing i can think of is whether there are some 'older' cached files hanging around in the system. Which points back to Server level page caching or the CDN.

It may be worthwhile also speaking to your host, to see if they can check for any routing/trace issues.

Hi David,

Deactivated wp- rocket and manually deleted cache files from the server and CDN disabled. Tested - same results :-(

New finding:

Noticed blog posts that are in classic format which has pre tag is showing the problem.
Blog posts that are in classic format which doesn't have pre tag is looking good in GSC.

I have a link added which doesn't have pre tag but is in classic format for your reference

ie,

https://ibb.co/7rrRBtD

Aah thats a good find... i did find this during my invesitgations, and stupidly didn't thing it was relevant:

https://digitalardor.com/articles/code-examples-google-mobile-friendly-test/

Reason i thought it were irrelevant is because you're only using <pre> tags and not <pre><code></code></pre> tags which is the 'correct' way of displaying code, and how the block editor works. And as per that topic above the issue came from the <code> missing styling not the <pre> ... doh - and all that meant i completely missed this...

I noticed you have this CSS in your child theme:

pre {
    font-family: monospace;
    display: block;
    padding: 17.5px;
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border-radius: 4px;
}

What happens if you temporarily disable that CSS ? We might be able to narrow it down to one of the properties such as the word-wrap/word-break causing the issue.

Hi David,

Tried removing pre CSS - no luck

pre {
    font-family: monospace;
    display: block;
    padding: 17.5px;
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.42857143;
    color: #333;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border-radius: 4px;
}

pre {
    font-family: monospace;
    display: block;
    padding: 17.5px;
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    background-color: #f5f5f5;
    border-radius: 4px;
}

No luck.

Not sure what else to try