[Support request] Showing Nonresponsive code blocks

Home Forums Support [Support request] Showing Nonresponsive code blocks

Home Forums Support Showing Nonresponsive code blocks

  • This topic has 11 replies, 4 voices, and was last updated 2 months ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2005941
    Vijaykumar

    There is an issue with the AMP pages when there are large code blocks. It was working well earlier but started giving issues recently from 1st October 2021.

    Showing non-responsive pages when there are code blocks on the page. Earlier it used to show sliders when there were large lines of codes but now it’s showing that without a slider hence making the page non-responsive or TEXT TOO SMALL to read.

    Screenshot: https://ibb.co/mtft4Pk

    #2006079
    David
    Staff
    Customer Support

    Hi there,

    the styles being applied to the the <pre> tag element are coming from the AMP Templates, not the theme.
    You can try adding this CSS to your AMPs Custom CSS to make sure it overflows correctly:

    pre {
        white-space: pre;
        overflow: auto;
    }
    #2008294
    Vijaykumar

    Great. Thanks for the help. It worked on AMP pages.
    But I see there are some mobile non-amp pages as well that are showing this issue.
    is it the same issue?
    Screenshot: https://ibb.co/7jhtyg6
    Also provided one sample url below.

    #2008382
    Ying
    Staff
    Customer Support

    You have some non-responsive table elements on this page, I’m sorry but this is not something that the theme can control:
    https://www.screencast.com/t/sjgiCCcJkh

    #2008731
    Vijaykumar

    But we are using a responsive Tablepress table plugin. Can’t we handle it the same way we did for AMP pages?

    #2008741
    Elvin
    Staff
    Customer Support

    The issue w/ third-party plugin is that the theme doesn’t control how it is styled because plugins usually have its own style.css for its styling.

    Seeing Ying’s screenshot, there’s a lot to override. You may want to ask TablePress if they have a patch or plugin version that makes styling a bit more responsive. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #2009644
    Vijaykumar

    @David
    Any suggestions here please?

    When I open the page on mobile, I don’t see any issue. But when crawled by Google, it’s giving not a mobile-friendly page error.

    FYI, in my previous message, I mentioned Tablepress but it’s not the Tablepress plugin tables/content. The plugin for syntax highlighting is Syntact Highlighter Evolved.

    #2009693
    David
    Staff
    Customer Support

    The ‘not mobile friendly’ response is no related to the code blocks.
    First question are you getting a mobile usability warning in your Google Search Console ? If so – how may URLs is it affecting ?

    #2012344
    Vijaykumar

    Hi David
    I have included a screenshot of the search console error under the Private information section below.
    It’s showing errors for around half of the total pages. Out of the error pages, around half are AMP pages but seems that is resolved by adding about overflow hack you provided. Now the issue is with normal mobile pages. When I do a mobile-friendly test here https://search.google.com/test/mobile-friendly I still see errors for these pages.

    Also, almost all of these pages are having code blocks so I suspect an issue with code lines overflow.
    Interestingly, when I visit pages on real mobile devices I see a proper horizontal scroll bar and pages without any issues but when I test on https://search.google.com/test/mobile-friendly in the test screenshot, I see the site is loading vertically in half part of the screen.

    #2012423
    David
    Staff
    Customer Support

    The non-amp page issue does not look related to the Code Blocks.
    When i run mobile friendly test i see that there are resources not being loaded, which is why the preview looks incorrect.

    I would suggest:

    1. Re-crawl the amp pages to resolve the mobile usability issue.
    2. Then wait 48hrs and re-crawl the other pages.

    The reason for #2 – i cannot see any reason why the resources cannot be loaded and it may just been down to Google Bots resources being under pressure.

    #2012454
    Vijaykumar

    Hi David
    The problem is – all the issues for amp and non-amp mobile pages are under one error. So when we click on validate fix, it checks for random 2-3 links from error pages and sees that these are not fixed so it does not continue validating the rest of the pages.

    #2013070
    David
    Staff
    Customer Support

    If you run a test in Mobile Friendly Test on any of the failed URLs, then click View Tested Page –> More Info.
    It lists the issues:

    Page resources
    x/y couldn't be loaded

    If you check them you will a large number of the resources were not loaded and just marked as Other Error.
    Those resources are required for the site to render correctly, and without them the mobile test fails.

    The Other Error is ambiguous … read here where i summarise its meaning:

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

    The Theme has no control over this, it really is down to googles resources and the only control you have over it is by making sure your site is as well optimized as it can be.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.