Mobile usability issues from content that is too wide, according to Google

Site URL: http://rossjames.net

Google search console team shows that many of my pages have "mobile usability issues" from "content that is wider than the screen". These errors show for two of my index pages,  a couple photo galleries, and several blog posts.
I thought that squarespace with the brine template takes care of being responsive to mobile size. Why is google saying I have all these errors?

See this guide by @christyprice

hi @tuanphan! thanks for the link. I guess just knowing that it's common and maybe not such a big deal is what I needed. Unlike in that guide, clicking fix on each error does not fix it. "Cannot continue validation process. Affected pages were found. Fix the issue and run validation again". I don't really get why because half of these pages are simply the link to a photo gallery. So there is nothing besides header, footer, and the brine template gallery

If you found content as wide in mobile searches then you must need to add AMP pages plugin on your website.

Hello,

28 minutes ago, MitchSabine said:

 

Does anyone have any recommendations on how to fix this?

I would tend to ignore this error. Google is not perfect. Most of these reporting services are useless in that they don't go into how they came to make their bold claims about the brokenness of your site/pages. OK I get it these services can point out some things that may cause an issue with ranking. But take everything with a grain of salt.

Now to what Google may be indicating with the too wide claim. It is possible that elements of the site are indeed wider than the screen but that fact can be hidden by the CSS overflow property. So while the report may be factually correct that doesn't correlate to an issue with the site scrolling from side to side.

Google flat-out says that such errors can prevent your site from being eligible for rich results. So if rich results is a priority and a ranking factor, isn't this a risky thing to just ignore?

I've been wrestling with these errors for over a month now. Making all kinds of little tweaks, removing elements, etc. to no little or no avail. The mobile friendly test tool says the site (https://iphoneintact.com) checks out, but when the actual crawler comes around later, it consistently generates the error. And there's nothing from google acknowledging this duality - their tools, reading the same site, and yielding two different results.

I'm getting this error and resubmitting isn't working. The errors keep coming. I did manage to fix one of the errors, links too close to each other, by running lighthouse from the google developers tool console, available in chrome (view, developer, developer tools on a mac). This showed that some words I was using as a link were too small - they were 4 letters long which was too small a link. I expanded the link to cover more words and the error disappeared. Note when running the live check from the google search console, even before fixing this error - it said my site was fine. So I think we have a number of issues, the two biggest being that the live mobile checker doesn't find all the issues - as lighthouse detected the small link error but the search console live checker didn't. And that something else is causing failures that doesn't appear in lighthouse or the google search console live checker. For me it is content too wide. Inspect the returned file: click on mobile usability, then the failed URL in the list, then the panel to the right should show 'inspect' at the bottom right. You can then see the file the google spider looks at to determine the errors. You can also see other things, such as the Squarespace CDN for images not being available to it, and various robots.txt errors. Note I have had pages with font errors and robots.txt errors in here that have passed every time - so these errors aren't important. The image ones I think are, so I am removing my images one by one and running tests to pin down exactly what is causing it to fail. I will keep you posted. Andrew

I have been having the same problem with mobility issues: content wider than screen. I have done everything possible (within the limits of my little brain) to fix the issue BUT it continues to exist (coming on and off over time). Some posts say not to worry about it, but others refer right back to Google and state it must be fixed. I am using the same template on various items for sale on my site, with many of the pages being listed as mobile friendly and other pages as having an issue. The confusion continues on my part: what is going on???  Any and all thoughts will be greatly appreciated.

Hi there. Thanks for the thread. I'm having the same mobility usage issue from Google console with my client's website since we added a HTML table on this page (see URL below). We intentionally designed it to reflect the Amazon A+ comparison table. It looks fine on desktop and mobile browsers. 

https://www.thrivingondisruption.com/the-books

Any tips to fix this welcome.

Will also try @tuanphan recommendation to follow @christyprice tips. Thank you.

On 5/2/2023 at 1:25 PM, GLUE said:

Hi there. Thanks for the thread. I'm having the same mobility usage issue from Google console with my client's website since we added a HTML table on this page (see URL below). We intentionally designed it to reflect the Amazon A+ comparison table. It looks fine on desktop and mobile browsers. 

https://www.thrivingondisruption.com/the-books

Any tips to fix this welcome.

Will also try @tuanphan recommendation to follow @christyprice tips. Thank you.

Here's the HTML table code. FYI it looks fine and as intended on desktop and mobile browsers. But Google console giving mobile issues alert.

<style type="text/css">

.tg  {border-collapse:collapse; border-spacing:0;}

.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Poppins, sans-serif;font-size:14px;

  overflow:hidden;padding:10px 5px;word-break:normal;}

.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Poppins, sans-serif; font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}

.tg .tg-uzv5{background-color:#ffffff;border-color:#ffffff;border-bottom:black;text-align:left;vertical-align:top}

.tg .tg-dy65{background-color:#eafe1f;border-color:inherit;font-family:SpaceMono-Bold;text-align:left;vertical-align:top;}

.tg .tg-c3ow{border-color:#ffffff;border-bottom:black;text-align:center;vertical-align:top;}

.tg .tg-0pky{border-color:inherit;text-align:center;vertical-align:top}

.tg  {width:100%; min-width:800px; overflow:auto !important;}

</style>

On 3/2/2022 at 5:09 AM, MitchSabine said:

• Clickable elements too close together
• Content wider than screen

I am also getting this error on my site, any solution that worked for you?