Showing Nonresponsive code blocks on AMP

Hi, shindevijaykr,

I checked the issue with the responsive styling of the code block on that page, and from what I can see, the overflow issue is happening because, in the AMP version of the page, there are some missing styles for the <pre> tag.

Mainly the AMP version of the page does not have the following CSS code.

pre {
    overflow-x: auto;
}

On my test website, I checked the issue using AMP plugin, and the overflow behavior of the code block seems to be working correctly in the AMP version of the page.

To resolve the issue you can try using a different AMP plugin or add overflow-x: auto; CSS code to the <pre> tag in the AMP version of the page.

Hi Gurav
Can you help on how to do this “add overflow-x: auto; CSS code to the <pre> tag in the AMP version of the page.”?

• This reply was modified 3 years ago by shindevijaykr.

Hi again,

Can you help on how to do this “add overflow-x: auto; CSS code to the

 tag in the AMP version of the page.”?

For this, you will need to consult the documentation of the AMP plugin used on your website. You can also contact the plugin developers for help.

Hi
Our AMP issue is resolved but the normal links on mobile are giving errors in the Google search console https://imgbb.com/7jhtyg6 when there are code blocks on the page.

See the thread we started here to ask for the solution from our theme but they say plugin author needs to handle it: https://generatepress.com/forums/topic/showing-nonresponsive-code-blocks/#post-2008294

Hi @shindevijaykr !

I checked the Google report for that page and the thread you mentioned. I can confirm what the theme developer noticed, there are a lot of assets missing/ failing to load. This could be due to the server speed as mobile tests time out really fast.

Please check out this discussion: https://support.google.com/webmasters/thread/4318798/mobile-friendly-test-page-resources-couldn%E2%80%99t-be-loaded?hl=en