How to Fix ‘Clickable Elements Too Close Together’ Mobile Usability Issue

Web Page Clickable Elements Too Close Together

Experiencing clickable elements too close together and not finding remedies for resolving this error in Google Search Console Mobile Usability Report? You are in luck because I’m going to cover many different angles showing you how to fix Clickable Elements Too Close Together error.

Why a Website Has Clickable Elements Too Close Together

Usually because most website setups using pre-defined Themes and Layouts created by web designers (instead of web developers) will have design and also layout issues for mobile devices. Google today due to Page Experience update wants all websites to provide great user experience knowing that visitors that it sends towards your website will be using many different devices (smartphone, laptop, desktop, tablets).

All clickable elements on a web page can be rendered too close to each other depending on device, hence Search Console Mobile Usability report picks these clickable web page elements as too close if the space is not wide enough between these web page elements.

Here’s a Video Tutorial That Shows How to Fix Clickable Elements Too Close Together Mobile Usability Errors

What are Clickable HTML Elements?

It can be menu links, search buttons, add to cart buttons, internal links, video play buttons, clickable images, clickable div, or any web page element that responds to user click events is considered as clickable.

How Can You Fix These Errors in Mobile Usability Report?

All you have to do is identify what they are, and then distance the space between them.

Example CSS Code Needed to Fix Clickable Elements Too Close Together Error

/*1rem CSS value usually will equal to 16px*/ margin-top:1rem; margin-right:1rem; margin-bottom:1rem; margin-left:1rem; Another example half the rem value /*.5rem CSS value usually will equal to 8px*/ margin-top:.5rem; margin-right:.5rem; margin-bottom:.5rem; margin-left:.5rem; You can also test paddings for fixing clickable elements too close together for web page elements /*1rem CSS value usually will equal to 16px*/ padding-top:1rem; padding-right:1rem; padding-bottom:1rem; padding-left:1rem; Basically, first identify the HTML element that is too close to each other, then, use margins and paddings placing them in your website Theme’s CSS file.

Furthermore, all tap targets (touch targets) such as buttons, will also need to be wide enough for providing good user experience. Learn more about Accessible & Responsive Web Design here

Another useful blog post by RankYa about how to fix Text Too Small to Read Mobile Usability Issue and find out why a website has NO URLs with good page experience

Google Search Console help section suggests to use URL Inspection Tool as well as conduct Mobile Friendly Test although it may be helpful to use these tools, most website owners will not be able to identify and fix Clickable Elements Too Close Together issues because both tools do not show what the web page element is nor how to fix it. Instead watch the above video lesson completely as I reveal many different scenarios for fixing these types of mobile usability errors.

Don't let Google's latest Page Experience update derank your business website in search, instead, master Google rankings and website conversions with this Master Class Course by RankYa (Free Lessons Included)

Learn how press here

By RankYa

RankYa is a passionate digital marketer, website optimizer, content creator, and a fully qualified web developer helping businesses of all sizes (big or small) to achieve better results online. We are a reputable and registered Australian business serving valued clients worldwide since 2008, built on hard work, honesty and providing exceptional personalized service

We love sharing our passion through freely available how to videos and courses related to business website marketing and optimization, Google (Search Console, Ads, Analytics, YouTube), SEO, HTML5, Structured Data and WordPress. Thank you for visiting our website. Rest assured that it will serve you well as well.

Leave a comment

Your email address will not be published. Required fields are marked *