How to Fix “Clickable Elements Too Close Together” Error (3 Methods)

Aug 15, 2023

How to Fix “Clickable Elements Too Close Together” Error (3 Methods)

Unresolved mobile usability issues can have a huge impact on your website’s traffic 📉 Find the solution right here and keep your traffic on track ⬇️
👉Subscribe: https://www.youtube.com/c/Kinsta?sub_…

A common problem Google Search Console may warn you about is the “Clickable elements too close together” error, which likely means that your site is complex for mobile users to navigate.

More than 4.32 billion people access the internet from their mobile devices. Hence, it’s crucial to resolve this clickable elements error as soon as possible. Thankfully, there are multiple ways you can do so and make your website more mobile-friendly.

In this video, we’ll explain what the “Clickable elements too close together” issue is, discuss why it happens, and walk you through three methods you can use to fix it. Tune in! ▶️

ℹ️ About Kinsta

Kinsta is an award-winning Cloud Platform designed to host and manage your WordPress sites, Applications, and Databases faster and more efficiently. Trusted by 25,000+ companies worldwide, from developers, startups, and agencies, to multinational brands, we guarantee lighting-fast performance, enterprise-level security, ease of use, and exceptional support.

🚀 Try our flagship Managed WordPress Hosting plans and get $240/month worth of premium features included in every plan. That’s free unlimited migrations, 20% faster load times thanks to Google’s fastest servers and Premium Tier network backed by Cloudflare’s 275+ CDN locations worldwide, and 24/7/365 multilingual technical support from humans in less than 2 minutes.

👉 Try risk-free with our 30-day money-back guarantee Powerful Managed WordPress Hosting

👤Follow us:
► https://kinsta.com/blog/
► https://kinsta.com/newsletter/
► https://twitter.com/kinsta
► https://instagram.com/kinstahosting
► https://facebook.com/kinstahosting

💡Discover all of our hosting solutions ► https://kinsta.com/

🕘Timestamps

0:00 Intro
0:54 What the “Clickable Elements Too Close Together” Error Is
2:56 Why the “Clickable Elements Too Close Together” Error May Appear
4:14 Use the YellowPencil Visual Customizer WordPress Plugin
6:34 Ensure That All Tappable Targets Are at Least 48px
8:19 Check the Input Method
10:50 How to Verify and Validate Your Error Resolution

📚Resources

⚠️ How to Fix the “Clickable Elements Too Close Together”
► https://kinsta.com/blog/clickable-ele…

🛠CSS code to adjust the target size
► https://kinsta.com/blog/clickable-ele…

#ClickableElementsTooCloseTogether

Content

0.45 -> Hello, I'm Maria.

1.41 -> And today we're going to learn how to fix

3.72 -> the clickable elements too close together error.

6.537 -> (upbeat music)

12.4 -> A common problem Google Search Console may warn you about

15.58 -> is the clickable elements too close together error,

18.75 -> which likely means that your site is complex

21.12 -> for mobile users to navigate.

22.89 -> Hence, it's crucial to resolve

24.59 -> this clickable elements, error as soon as possible.

27.76 -> Thankfully, there are multiple ways you can do so

30.04 -> and make your website more mobile friendly.

32.7 -> In this video we'll explain what this error is,

35.72 -> discuss why it happens and walk you through three methods

38.78 -> you can use to fix it.

40.43 -> But before we get too far,

42.08 -> I wanna let you know that

43.03 -> there will be links to more resources

44.78 -> in the video description

46.15 -> and remember subscribe and ring that bell

48.55 -> to get notifications for future helpful content.

51 -> Now let's get to work.

56.26 -> In a nutshell, mobile usability errors

58.84 -> can make your WordPress site inaccessible

61.1 -> and more challenging for mobile users to navigate.

64.21 -> You can use Google Searches Console's

66.49 -> mobile usability report to test your site.

68.92 -> There are six main types of mobile usability issues

72.17 -> you may come across.

73.73 -> Which are uses incompatible plugins.

77.38 -> Viewport not set.

79.46 -> Viewport, not set to device-width.

81.86 -> Texts, too small to read.

83.94 -> Content wider than the screen.

86.41 -> Clickable elements too close together.

88.87 -> As part of this report, Google Search Console

91.81 -> will check all of your websites clickable elements,

94.43 -> such as buttons and links.

96.73 -> The purpose of this is to verify whether mobile users

99.55 -> can comfortably interact with your websites elements

102.27 -> using only touch

103.77 -> rather than using a keyboard or a mouse.

106.05 -> If Google Search Console determines

107.98 -> that your tappable elements

109.23 -> pose a challenge for mobile users,

111.36 -> it will include the clickable elements

113.62 -> too close together error in your summary report.

116.34 -> If you click on the error,

117.84 -> it will bring you to the details and status page.

120.85 -> On this screen, you can learn more about the issue,

123.71 -> including the affected pages.

125.8 -> Essentially, the clickable elements error is a warning

129.15 -> indicating that the topical elements on your WordPress site

132.07 -> are too small for mobile users to interact with comfortably.

135.59 -> Alternatively, it could mean they are large enough,

138.42 -> but positioned too close to neighbor in elements.

141.57 -> If buttons, links and other clickable items

144.27 -> clustered too close together,

146.16 -> users risk tapping the wrong ones,

148.6 -> which hurts the user experience.

150.62 -> Although having clickable elements too close together

153.16 -> is classified as a mobile usability error,

156.09 -> resolving this issue can also improve the accessibility

159.01 -> of your site.

160.29 -> For example, peoples with dexterity issues

163.24 -> may appreciate some additional space

165.26 -> between interactive elements.

166.89 -> In contrast users with vision-related problems

170.09 -> may find it easier to interact

171.72 -> with large clearly defined buttons and links.

174.5 -> Various factors can result

176.25 -> in the clickable elements too close together issue.

179.35 -> Sometimes it's just because Google couldn't request

182.41 -> the necessary resources during rendering.

185.46 -> If that's the case,

186.8 -> then you can try using the mobile friendly test

189.28 -> and see if it passes.

191.03 -> If it does, you can probably ignore it.

194.06 -> This issue may also result from your website's design.

197.38 -> For example, if you try to squeeze

199.7 -> too much interactive elements

201.39 -> onto a single webpage,

202.93 -> you may see this mobile usability error.

205.54 -> Another reason for the clickable elements error

208.08 -> is that there's a problem with the mobile responsiveness

210.77 -> of your site's design.

212.31 -> Your website should be flexible and automatically adapt

215.16 -> to suit the visitors specific device

217.04 -> to provide the best possible user experience.

219.63 -> However, if your site isn't responsive,

222.22 -> that could result in usability issues.

225.13 -> More specifically, if your website isn't responsive,

228.57 -> parts of it may appear stretched, shrunken

231.47 -> or warped on specific screens.

233.97 -> On devices with smaller screens,

235.91 -> tappable elements can appear cramped or distorted.

239.05 -> Identifying some of the standard and potential reasons

241.81 -> for this error to occur

243.23 -> can help you better understand

244.98 -> why your site is encountering mobile usability issues.

248.42 -> It'll also help you determine how to fix the problem.

254.814 -> If mobile users struggle to navigate your website,

257.16 -> what's keeping them from navigating away from it?

259.94 -> Preventing this issue is essential to resolve

262.61 -> all mobile usability issues as quickly as possible.

265.7 -> Let's take a look at three methods you can use

268.24 -> to fix the clickable elements too close together error,

271.3 -> and provide a better UX to your mobile users.

274.58 -> YellowPencil Visual Customizer

276.66 -> is a front end WordPress plugin

278.72 -> that enables you to edit your website, CSS and theme files

282.44 -> without any coding.

283.8 -> This plugin is handy

285.12 -> for modifying your tappable targets as size,

287.8 -> such as making your buttons bigger.

290.63 -> You can also create more space between clickable elements

293.6 -> by changing the margins and spacing between them.

296.78 -> You can download the YellowPencil Plugin for free

299.73 -> or purchase a regular or extended license.

303.11 -> To use it first install and activate it

305.88 -> on your WordPress site by browsing to plugins,

308.8 -> then add new searching for the plugin

311.58 -> and then clicking on install now, and then activate.

316.58 -> Next navigate to YellowPencil customizations.

320.52 -> Under the customization tab, select Let's start.

327.26 -> The visual customizer interface will load

329.58 -> and prompt you to select the page

331.29 -> triggering the mobile usability error.

333.87 -> You can either apply your changes to this specific page

337.32 -> or across your entire website.

339.33 -> If many pages are presenting the clickable elements error,

342.66 -> you may want to select global,

344.63 -> make your selection and then click on continue.

347.75 -> You can now work your way through your webpage

350 -> selecting each tappable element.

352.4 -> YellowPencil will display a panel of editing options

355.45 -> for that element.

356.54 -> For example this screenshot,

358.56 -> we selected padding and added 10 pixels on all sides

362.66 -> to increase the space between the tappable targets.

365.6 -> The size and position settings also help resolve

368.44 -> the clickable elements too close together error.

371.21 -> Although it isn't necessary,

372.73 -> if you want to edit the CSS code directly,

375.16 -> you can do so through the left panel.

378.22 -> Then you can move on to the next element

380.52 -> that's causing mobile usability issues

382.56 -> and repeat the process.

384.28 -> When you're happy with your changes,

385.91 -> click on the green Save button.

388.08 -> It's impossible to create a single static design

391.02 -> that looks good and functions correctly across all devices.

394.93 -> Instead, it would be best

396.85 -> if you aim to create a flexible layout

398.94 -> by defining all of your tappable targets

400.99 -> using device-independent pixels or DPI.

405.01 -> Elements that are defined using DPI

407.12 -> can automatically scale to size

409.01 -> based on the user's screen size.

410.81 -> On a mobile device,

412.12 -> the minimum recommended touch target is 48 by 48 pixels.

416.51 -> It equates to about nine millimeters,

418.62 -> which is sufficient for the average person's finger pad.

422.06 -> Therefore, if you're struggling to figure out

424.35 -> exactly which elements are the source of the issue,

427.09 -> it may help to look into each elements DPI.

430.97 -> If it's below the recommended touch target,

433.37 -> for example, 24 pixels,

435.58 -> you can increase the padding to bring it up to 48 pixels.

438.96 -> You can check the computed value of a tappable area

441.9 -> using Chrome DevTools or Firefox DevTools,

445.21 -> depending on which browser you prefer.

447.67 -> We'll use Chrome for an example.

449.86 -> To check the DPI value of one of the clickable elements

452.91 -> on your WordPress site,

454.32 -> open it in a Chrome browser tab and navigate to the page,

457.32 -> presenting the clickable elements too close together error.

460.89 -> Right click on the page and select inspect.

463.87 -> Clicking inspect will open up Chrome DevTools.

467.05 -> Along the top click on the icon displaying mobile devices,

470.61 -> which will bring you to the toggle device toolbar screen.

473.36 -> In the left preview panel,

475.05 -> you'll see a mobile device emulation of your site.

478.92 -> If you hover over and click on any of the tappable elements,

482.44 -> you can view the computed value to the right.

485 -> If required, you can then adjust

487.05 -> an element's sizing by directly editing your CSS

490.21 -> and site files or using a plugin such as YellowPencil.

493.87 -> If you're trying to fix the clickable elements

495.94 -> too close together error,

497.45 -> it may help check the input method.

499.97 -> It refers to the method or device a user is using

502.9 -> to view and interact with your site.

504.82 -> More specifically, you can see whether they're using

507.72 -> a smartphone tablet or other devices.

511.22 -> For example, touch is considered an imprecise input method.

515.53 -> As we just discussed using CSS

518.32 -> to increase the size of your touch targets

520.35 -> or add extra padding can make tappable targets

523.38 -> easier for visitors

524.55 -> who are using touch devices

526.27 -> to interact with your website.

528.22 -> However, determining a user's device,

530.62 -> isn't an exact science.

532.59 -> This technique uses what's known as the pointer

535.47 -> to check the user's primary input method,

538.13 -> which can have one of two values.

540.85 -> Course the device's primary input method is touch.

545.5 -> Fine, the input method is a mouse and trackpad.

549.43 -> Note that if touch is the user's primary input method,

552.89 -> this suggests that the person is viewing your website

555.78 -> on a smartphone or tablet.

557.63 -> However, the presence of a touch screen

559.81 -> doesn't guarantee that someone is using a mobile device.

562.9 -> They could be accessing your site

564.52 -> using a large touchscreen enabled laptop,

567.34 -> or they might have connected to a Bluetooth device

570.15 -> to their smartphone.

571.17 -> If the pointer returns a course value,

573.46 -> you can adjust the topical target size using CSS.

576.8 -> To do so you can place the following in the CSS file

580.29 -> of your WordPress theme

581.64 -> or by using a plugin such as YellowPencil.

584.48 -> After you adjust your CSS,

586.47 -> you can tell Google to re crawl your website,

588.88 -> to determine whether this has fixed the issue.

591.67 -> Alternatively,

592.92 -> you can ask Google to crawl individual URLs

596.35 -> using the URL Inspection tool.

598.84 -> After submitting your URL via this tool,

601.46 -> select request indexing.

604 -> The inspection tool will then test the URL

606.21 -> for any obvious indexing issues.

608.47 -> Assuming that Google finds no issues,

611.02 -> the page will then qualify for indexing.

613.22 -> Alternatively, if you have a large number of URLs,

616.51 -> you can submit a site map.

618.31 -> For each page that requires re-indexing

621.08 -> update is last mod tag with the last modification dates.

625.4 -> you can then submit this site map

627.03 -> using Google site map report tool.

629.12 -> In most instances,

630.66 -> your site map will go through immediately.

632.81 -> However, it may take Google sometime

635.44 -> to crawl all of the URLs in your site map,

638.16 -> depending on factors such as site size,

640.62 -> traffic and activity.

642.54 -> There's also no guarantee

644.02 -> that Google will crawl every single URL in your site map.

650.38 -> It's important to determine whether your changes

652.68 -> have resolved the clickable elements

654.33 -> too close together error.

656.06 -> You can do this by rerunning Google's

658.21 -> mobile usability tests.

659.92 -> To do so, navigate back to your mobile usability report

663.31 -> and locate the clickable elements to close together error.

666.96 -> Next select the validate fix option

670.06 -> Google will then crawl your website

671.96 -> and you will receive a message letting you know

674.32 -> that it's in the process of validating the change.

677 -> If you've resolved the error,

678.64 -> then Google Search Console will display a past message

682.15 -> along with a green check mark.

684.68 -> On the other hand,

685.89 -> if the fixes you employed are not validated,

688.55 -> you'll have to revisit the error

690.08 -> to implement an alternative solution.

693.9 -> Kinsta's WordPress Hosting can speed up your website

696.28 -> by up to 200% and you'll get 24/7 support

699.7 -> from our expert WordPress engineers.

701.94 -> Let us show you the Kinsta difference.

704.04 -> Try a free demo of MyKinsta dashboard at demo.kinsta.com.

708.49 -> Thank you for watching.

709.85 -> Don't forget to subscribe for more tutorials,

711.96 -> explainers and helpful content like this.

714.092 -> (upbeat music)

Source: https://www.youtube.com/watch?v=I1RJuxAO6ik