I was checking my Google Search Console information for this website and under the “Mobile Usability” tab, I noticed that some of my pages were listed as “Not Usable”. Most of the pages are fine, but a few are not. When I checked, there were actually three categories that the same pages were showing as not usable. The categories are: text too small to read, clickable elements too close together, and content wider than screen.
When I’ve browsed my site, everything looks fine to me. I’m using a responsive theme that doesn’t seem to have any issues. Also, if it were the theme, I would have expected these issues on all, or almost all, of the pages of the site. But it is only a few pages, and they all show as not usable for the same three categories. Looking more closely at the pages, one thing they all have in common is that I have pasted code on those pages and I used the Enlighter plugin for showing code in a format that can be cut and pasted easily.
Looking on mobile, everything seems to look okay. The only possible clickable elements due to the Enlighter plugin would be the hover over effect of showing clickable elements to copy the content, remove the line numbers, open the content in a new windows, or link to the plug-in homepage. They don’t seem to be particularly close on my phone.
The Enlighter plug-in has plenty of options to change the layout, fonts, spacing, etc. I was debating just setting the font bigger and seeing if the mobility errors went away. Instead I decided to take an easy route of changing the default theme within the plugin from Enlighter to Classic. The formatting still looks decent, but I do think the fonts are slightly larger and spaced out a bit more. I’ll have to probably wait a few weeks at least to see if the errors go away on their own.
As best I can tell, those pages are not suffering significantly in search engine results, but I figure if the Search Console if giving me messages, I should try my best to address them.
I’ll check back in a few weeks and see if the change made any difference, or if by that time maybe I’ll have some other information to help me pin-point the problem.
<update 11/8/22>
I get weird formatting at times with Enlighter plugin – it may not be the plugin itself, but also a combination of how litespeed cache is trying to optimize various formatting that messes up some display layouts. To minimize problems, I’ve just removed the use of Enlighter plugin on those pages and reverted to using the <code> </code> formatting instead. I really don’t like that appearance, but I first want to make sure I can consistently pass the Google mobile usability tests. I went ahead and clicked the “validate fix” in the search console and I’ll update this post once that is complete. Assuming it passes, I’ll then need to figure out how to improve the appearance, but keep it where it can pass the mobile usability test.
<update 11/13/22>
Google validated the changes fixed the error. Any pages where I’ve used the Englighter plugin are now gradually showing up as not working on mobile and I’m fixing them as I go. I have no idea how much these issues impact search engine traffic.