3

In search results google reports "this page is not mobile-friendly". I want to fix this.

when I test my website in the mobile-friendly test, it reports:

  1. Content wider than screen.
  2. Clickable elements too close together.

How can I find the items/content that are creating these problems?

Any help would be appreciated.

  • They also provide guidelines just below the suggestion. Have you read that? Which thing you did not understand. 1. Content is wider means user have to scroll horizontally. 2. Elements are close means your button, link, text, ads or other elements are too close with each other. Hard to give proper answer bro. – Goyllo May 20 '17 at 15:36
  • yeah but everything looks OK on website. and its responsive. the home page is mobile-friendly in the test. i dont get it. in test result google shows the site in a mobile size in the right side of the screen but its only html version without css, is that normal or its saying something? – kiasaty May 20 '17 at 15:55
  • Since you aren't seeing CSS on the mobile preview, that might mean Google can't access your CSS. Check your robots.txt file to see if you have CSS or JS files disallowed. If Googlebot can't see your CSS file, they won't be able to view the full page to tell if it is actually mobile friendly. – Matthew Edgar May 20 '17 at 16:58
  • Sharing the URL would be helpful. – Simon Hayter May 20 '17 at 18:34
  • Matthew I think Google does not look into robots.txt for mobile friendly test. If OP tested that website from search console render option then robots.txt surely used by Googlebot. For both things google use different user agent. I would like to see the page URL. Something is missing. – Goyllo May 20 '17 at 18:34
2
  1. Content wider than screen.
    • Your page content is causing a horizontal overflow. You should be able to replicate the issue by changing the viewpoint of your browser and see if it causes an overflow. You could also try Google Fetch URL, but the results would be limited.
    • Easiest and best method for testing mobile compatibility is to use Chrome Dev Tools remote debugging on an Android device, this way you can use 'inspect element' on the mobile device, from the comfort of your desktop computer.
  2. Clickable elements too close together.

    • This one should be pretty obvious, your elements are too close.
    • SOURCE

      Small or tightly packed links or buttons are more difficult for users to accurately press on a touchscreen than with a traditional mouse cursor. To prevent users from being frustrated by accidentally hitting the wrong ones, tap targets should be made sufficiently large and far from other tap targets that a user can press them without their finger pad overlapping any other tap targets. The average adult finger pad size is about 10mm wide (a bit less than half an inch), and the Android UI guidelines recommend a minimum tap target size of roughly 7mm, or 48 CSS pixels on a site with a properly-set mobile viewport.

    • To give you an idea on the correct spacing for a mobile device and because it's a good practice, I recommend you check out Google's Material Design Metrics and keylines.

2

In my experience the Google tool is just not smart enough to figure out clever CSS or other techniques you may have used to make your screen mobile-friendly. For example, I have had tables which remove columns depending on the screen width and even used bootstraps "table-responsive", but until I put in a pointless div to style "overflow-x:auto;" it reckoned the content is wider than the screen. Similarly, I drop some clickable elements on a small form factor but Google still reckons clickable elements are too close together even though they don't show on a mobile device.

It's just a dumb tool, you have to find workarounds or dumb down your content.

0

I’ve seen the same errors and the problem wasn’t obvious. I had sticky widgets that were overflowing links in my footer when viewed in the smaller viewport. I used CSS to hide the widget on smaller screens and resubmitted to Google as fixed. Google marked the problem as corrected within 24 hours.

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.