- This topic has 11 replies, 4 voices, and was last updated 2 years, 4 months ago by David.
-
AuthorPosts
-
November 16, 2021 at 1:06 am #2005941Vijaykumar
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
November 16, 2021 at 3:14 am #2006079DavidStaffCustomer SupportHi 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; }
November 17, 2021 at 11:11 am #2008294VijaykumarGreat. 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.November 17, 2021 at 12:23 pm #2008382YingStaffCustomer SupportYou 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/sjgiCCcJkhNovember 17, 2021 at 9:26 pm #2008731VijaykumarBut we are using a responsive Tablepress table plugin. Can’t we handle it the same way we did for AMP pages?
November 17, 2021 at 9:40 pm #2008741ElvinStaffCustomer SupportThe 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. 🙂
November 18, 2021 at 8:03 am #2009644Vijaykumar@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.
November 18, 2021 at 8:38 am #2009693DavidStaffCustomer SupportThe ‘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 ?November 20, 2021 at 9:26 am #2012344VijaykumarHi 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.November 20, 2021 at 10:44 am #2012423DavidStaffCustomer SupportThe 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.
November 20, 2021 at 11:22 am #2012454VijaykumarHi 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.November 21, 2021 at 6:17 am #2013070DavidStaffCustomer SupportIf 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: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.
-
AuthorPosts
- You must be logged in to reply to this topic.