Sep 19, 2022
Mobile Usability Errors | Content Wider Than Screen / Clickable Elements Too Close Together
Hopefully someone can help. I recently created a website and submitted it to search console. Over time some errors have popped up which do not seem to be accurate.
It seems to be on one specific page where these issues are sticking, as they showed up for another page but upon recrawling, they were validated as successfully resolved.
Has anyone has this issue before?
Content Wider Than Screen (Mobile Usability)
Clickable Elements Too Close Together (Mobile Usability)
Troubleshooting so far:
2 x Recrawls.
Copied the page within Squarespace with a new url and scanned this one, same issue.
Checked the page in Bing mobile usability and showed all was fine.
Page: https://www.armakuni.com/armakuni-blog/whats-an-agile-standup
Thanks!
Informational notification.
This question is locked and replying has been disabled.
Community content may not be verified or up-to-date. Learn more.
Sep 19, 2022
Hi Kane
In all honesty, it's sometimes hard to pin these things down.
You are failing the mobile test for sure...
If you click "View Tested Page" and then Screenshot, it shows an odd result.
REALLY interestingly I've just commented on another thread, for another person using the same hosting environment... https://support.google.com/webmasters/thread/179948052
That seems a tad too coincidental to me.
When you get "too wide" it's because something is forcing the page outside of the parameters of the testing 'window'. That's usually because the CSS (or layout control) of the page is failing to define the layout properly or an errant item is simply forcing everything to the wrong dimensions. This can also happen if the page is very slow or if something like the CSS is blocked by robots.txt.
Community Manager Matheus. recommended this
Sep 19, 2022
You don't have clickable elements that are too close from what i can see. If that was the case, they would be listed in this test https://web.dev/measure/ under the SEO section.
You can certainly get 'content too wide' if you block CSS or other key assets to the bot in robots.txt
Is this part of that maybe... api/1/performance/settings?
Otherwise, when you get this message without the actual problem, it's typically caused by something actually being too wide forcing the screen width (making everything else on the page become too small artificially), or by your general site speed causing things not to load properly (the bot only assigns a limited crawl quota to each site).
In your case you should certainly look at sizing the top image appropriately. Right now that image is 683px x 476px, yet the mobile bot test is around 380px. While you can get that to fit by simply scaling it (as you have), what that means on mobile, is it's taking far longer to download than it should.
I'm unclear what software your site is built with, but if you've done this in HTML, look at using <picture> https://www.w3schools.com/tags/tag_picture.asp for foreground images or @media for background ones https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
In Wordpress, look at these...
The principle in both cases (picture/@media), is you make a number of different versions of the same sized image and then the command provides the nearest for the viewport size. That means fast loading of images matched to the display size.
You should also 'lazy load' any offscreen content (not this clearly as it's on the screen from the get go).
Additionally to this, I'd also take a look at the detailed report at web.dev (click "View Report" once the audit of a page is done). A performance of 44 isn't totally terrible, but ideally you want to be nearer to 100 (certainly in the green). That's again to do with serving the site quickly and to not get outside of the bot's quota (which can mean key assets are missed).
Hope something there helps.
Last edited Sep 19, 2022
Community Manager Matheus. recommended this
All Replies (3)
You don't have clickable elements that are too close from what i can see. If that was the case, they would be listed in this test https://web.dev/measure/ under the SEO section.
You can certainly get 'content too wide' if you block CSS or other key assets to the bot in robots.txt
Is this part of that maybe... api/1/performance/settings?
Otherwise, when you get this message without the actual problem, it's typically caused by something actually being too wide forcing the screen width (making everything else on the page become too small artificially), or by your general site speed causing things not to load properly (the bot only assigns a limited crawl quota to each site).
In your case you should certainly look at sizing the top image appropriately. Right now that image is 683px x 476px, yet the mobile bot test is around 380px. While you can get that to fit by simply scaling it (as you have), what that means on mobile, is it's taking far longer to download than it should.
I'm unclear what software your site is built with, but if you've done this in HTML, look at using <picture> https://www.w3schools.com/tags/tag_picture.asp for foreground images or @media for background ones https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
In Wordpress, look at these...
The principle in both cases (picture/@media), is you make a number of different versions of the same sized image and then the command provides the nearest for the viewport size. That means fast loading of images matched to the display size.
You should also 'lazy load' any offscreen content (not this clearly as it's on the screen from the get go).
Additionally to this, I'd also take a look at the detailed report at web.dev (click "View Report" once the audit of a page is done). A performance of 44 isn't totally terrible, but ideally you want to be nearer to 100 (certainly in the green). That's again to do with serving the site quickly and to not get outside of the bot's quota (which can mean key assets are missed).
Hope something there helps.
Last edited Sep 19, 2022
Community Manager Matheus. recommended this
Sep 19, 2022
thanks so much for the reply. I think I just fixed up the clickable elements too close issue, in the footer were some text based links which were under 48px and overlapping according to lighthouse. (but surely every page would be failing since its a universal footer!)
I am using Squarespace as the website builder so I thought their responsive builder would take care of such image rendering.
I saw in the search console live test more info section that robots.txt is blocking some resources but im not sure how I would change this on Squarespace.
Would you suggest it is the top image then? Maybe I will take it out and retest to see.
Thanks for all your help and links , will check them out now also.
Hi Kane
In all honesty, it's sometimes hard to pin these things down.
You are failing the mobile test for sure...
If you click "View Tested Page" and then Screenshot, it shows an odd result.
REALLY interestingly I've just commented on another thread, for another person using the same hosting environment... https://support.google.com/webmasters/thread/179948052
That seems a tad too coincidental to me.
When you get "too wide" it's because something is forcing the page outside of the parameters of the testing 'window'. That's usually because the CSS (or layout control) of the page is failing to define the layout properly or an errant item is simply forcing everything to the wrong dimensions. This can also happen if the page is very slow or if something like the CSS is blocked by robots.txt.
Community Manager Matheus. recommended this