: Fixing "Page is not mobile friendly" report from Google test 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

@Rambettina238

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.

Vote Up Vote Down

@Nimeshi995

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.

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.

Vote Up Vote Down