As reported by GSC, clickable elements too close together represent a mobile usability issue that relates only to “clickable elements” such as links, icons, buttons, etc., and does not apply to all elements on the page. OK, so how to fix Clickable elements too close together in the Nucleare Theme?
Google recommends that each clickable element should have a size that is not less than 48 pixels.
A minimum recommended touch target size is around 48 device-independent pixels on a site with a properly set mobile viewport. For example, while an icon may only have a width and height of 24px, you can use additional padding to bring the tap target size up to 48px. The 48×48 pixel area corresponds to around 9mm, which is about the size of a person’s finger pad area.
To fix this error, you need to increase borders or padding (or set margins), so that the tap target size is at least 48 pixels. For example, you can increase the padding to 9 pixels and set the margin to 10 pixels (13 + 9 + 9 + 10 + 10 = 51).
You can check the size of an element in Google Chrome: right-click on the element and select “Inspect”.
Then choose “Styles” in the console on the right side of the page and scroll down.
Go to the WordPress admin dashboard, select Appearance – Customize, and then select Additional CSS.
Paste your code from a new line and click Publish:
ul.footer-links li a
{
padding-bottom: 9px;
margin-bottom:10px;
}
Your CSS section should look like this:
That’s all.
Now the tap area around links in the footer is over 48 pixels, and this error has been fixed.
Clickable elements too close together in the Nucleare Theme, sorted.
For more on my refresh on WordPress.
