Making your site touch-friendly for phones and tablets
📚 Theory: Touch vs Mouse
The Core Problem
On a desktop, users have a mouse cursor that can
hover over elements. On a phone, users have
fingers that tap. Hover effects don't work as
expected on touch devices.
What Happens on Touch Devices
:hover triggers when you tap, but
stays active after tapping
User sees hover state but can't remove it
Dropdown menus that open on hover don't work on touch
Tooltips that appear on hover never appear
The Solutions
Use `:active` — provides instant feedback when
finger touches screen
Use `@media (hover: hover)` — only apply hover
styles on devices that support hover (mouse)
Use `@media (pointer: coarse)` — detect touch
screens
Make tap targets at least 44×44px — fingers need
space
1. Tap Target Size (44×44px minimum)
Apple and Google recommend minimum 44×44px for touch
targets. Try tapping each button on your phone.
/* ❌ Too small — hard for fingers */ .btn-too-small { padding: 4px
8px; font-size: 0.75rem; } /* ✅ Good — 44px minimum */ .btn-good-size
{ padding: 12px 20px; font-size: 1rem; min-width: 44px; min-height:
44px; }
2. Hover vs Active States
On desktop, hover works. On touch, active provides tap feedback.
/* Hover styles ONLY apply on devices with hover capability (mouse) */
@media (hover: hover) { .btn:hover { background-color: #27ae60;
transform: scale(1.05); } } /* Active state works on ALL devices (tap
feedback) */ .btn:active { background-color: #1e8449; transform:
scale(0.98); }
💡 Test on your phone: Tap the button above. You
should see an instant color change (active state). On desktop, you'll
see the hover effect.
3. Instant Tap Feedback with :active
:active triggers the MOMENT your finger touches the
screen — perfect for touch feedback.
/* Active state — triggers instantly on touch */ .btn:active {
background-color: #e67e22; transform: scale(0.97); transition: all
0.05s ease; /* Very fast transition */ }
4. Touch-Friendly Navigation Menu
Each menu item has 44px minimum height and tap feedback.