How To Fix ‘clickable elements too close together’, ‘content wider than screen’ and ‘text too small to read’?

Have you received a warning from Google saying

  1. Clickable elements too close together
  2. Content wider than screen
  3. Text too small to read?

You can’t ignore this as it may cause mobile usability issue and you may lose ranking. If you have an eCommerce website then this is even more important, to ensure you have one transaction, the user generally visits a number of pages. Any mobile usability issue leads to conversion reduction, higher bounce rate and overall poor website and business performance.

Google mobile usability warning
clickable elements too close together

Let’s learn how to fix these issues.

Clickable Elements Too Close Together

You will get this warning when you have a real usability issue, especially on the mobile device where if links or actionable items may be too close which can make it difficult to use your website.

How to fix clickable elements too close together in WordPress or other website platforms?

Clickable elements too close together
Clickable elements too close together

Now, if you see the links in the above image, you will are very close together. Here is how you can fix this.

Step 1: Right-click on the link and click on Inspect in Google Chrome as shown in the image below:

 

Google Chrome Inspect
Google Chrome Inspect

Step 2: Increase the line height and see if that is good enough.

CSS Changes Clickable elements too close together
CSS Changes Clickable elements too close together

 

Step 3: Apply changes in the CSS file.

WordPress Back-end >> Appearance >> Theme Editor >> Load style.css

Search for the line and apply changes.

Warning: You should always take a backup if things don’t go as planned to change back.

Content Wider Than Screen

You will receive the warning “Content wider than screen” when some of your content may not fit within the screen of mobile and user may need to scroll left to right to view the content.

Content wider than screen
Content wider than screen

It can happen due to a YouTube video embed where you may not have set the correct CSS style to fit the video within the screen. The simplest way to fix it by setting the width to 100%. See examples below.

It can also happen when you may upload an image that might be crossing the mobile width, you must apply the right CSS coding to fit the image correctly.

How to fix the image going wider than the screen on mobile?
How to fix the image going wider than the screen on mobile?

How to fix the image going wider than the screen on mobile?

Either set the image width to 100% or apply an appropriate CSS style to fit within the screen.

<img src=”image-path” alt=”” width=”100%” />

It can also happen with tabular data when you may have too many columns which may not fit on the mobile screen.

Text Too Small To Read

Your content should be designed to be read by all ages. The current trend to be nice and bold.

If your text is too small then increase the font size and re-submit to Google.

 

Add a Comment

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

Show you are human * Time limit is exhausted. Please reload CAPTCHA.

css.php