Skip to main content
SlapMyWeb
Slap a site
Fix Guide

How to Fix Tap Targets That Are Too Small

Make buttons and links big enough and far enough apart to hit on a phone.

Easy Medium Impact 30-60 min

Tap targets that are too small or too close together cause mis-taps on a phone. The practical minimum is about 44 by 44 CSS pixels with roughly 8 pixels between adjacent targets, and WCAG 2.2 sets 24 by 24 as an absolute floor. Padding the interactive element is the fix — enlarging the text is not.

Why It Matters

Mis-taps are a conversion problem before they are an accessibility one: a link so close to another that reaching it is a lottery costs the visit. It disproportionately affects people with motor impairments and anyone using a phone one-handed.

How to Fix

1

Find the offenders

Icon-only buttons, links inside dense paragraphs, close pagination controls and footer link lists are the usual cases.
2

Pad the interactive element

Add padding to the anchor or button so its clickable box grows. Wrapping a small icon in a larger link is better than scaling the icon.
3

Space adjacent targets

Leave around 8 pixels between neighbours so a slightly off tap does not land on the wrong one.
4

Test with a thumb, not a cursor

Check on a real phone held one-handed. Targets in the top corners are hardest to reach even when they are large enough.

Code Fix

css
Before (broken)
.icon-btn { width: 20px; height: 20px; }
After (fixed)
.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Platform-Specific Instructions

WordPress

Theme footers and social icon rows are the usual culprits — often 16-pixel icons with no padding.

Next.js

Watch icon-only buttons built from a 16px lucide icon: the icon is not the target, the button around it is.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.

Run a free audit
Free foreverNo signupResults in 30s