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

Testing

To manually verify that a webpage user interface doesn’t contain small space between clickable elements:

Open an example webpage as shown in search console.

Identify all clickable elements (use mobile device emulator in Google Chrome web developer toolbar (press F12 on your keyboard)), or interactable elements within the user interface (web page).

Consider to separate them from other elements by 8dp of space or more.

Making touch targets at least 48x48dp also provides better user experience.

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 problem web page element is located 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.

By RankYa

RankYa digital marketer, website optimizer, content creator, and a fully qualified web developer helping businesses of all sizes achieve greater results online. Based in Melbourne Australia RankYa serves valued clients worldwide by providing personalized services.

We love sharing our proven experience through how to videos and complete courses related to business website marketing, conversion optimization, Google (Search Console, Ads, Analytics, YouTube), SEO, HTML5, Structured Data and WordPress WooCommerce Shopify. Thank you for visiting our blog.

6 comments

  1. After reading this blog, I’ve learned new things that I haven’t learned anywhere else.

    I have found full guide of google search console.
    Thanks

    1. Great to hear, I do understand that fixing Clickable Elements Too Close Together in Search Console Mobile Usability Reports can be cumbersome, usually its to do with padding and margin of HTML elements. Meaning bit of CSS may fix basic issues. In either case, do not neglect mobile usability issues as they affect Google rankings. I’m glad you’ve found this blog post by RankYa useful 🙂

  2. I truly like your technique of showing us the steps. Please visit my website as well and tell me what you think.

Questions? Leave a Comment!

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