Minimum size
Aim for comfortable controls around 44px or larger.
Platform under construction
Touch Targets
Touch targets are the physical side of responsive design. A control is not usable if it is too small, too crowded or only designed for a mouse.
.button {
min-height: 44px;
display: inline-flex;
align-items: center;
}
Responsive mental model
Touch targets make responsive design feel real in the hand.
Responsive design is not only layout width. People tap with fingers, thumbs and touch screens, often while moving.
Buttons, links, form controls and navigation items need enough size and spacing to be used without precision.
Hover effects should never be the only way to discover or use an interface. Touch screens need visible states and direct controls.
Spacing
Separate targets so users do not tap the wrong action.
Pointer type
Use pointer queries for fine versus coarse input.
Visible state
Do not hide essential behavior behind hover only.
Visual model
Turn the responsive idea into something you can see.
44px plus
Controls need physical room.
Space between
Separate actions clearly.
Visible
Show what can be tapped.
Coarse pointer
Design for fingers as well as cursors.
Good CSS versus fragile CSS
Comfortable touch control
.button {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: 1rem;
}Tiny tap target
.icon-link {
width: 22px;
height: 22px;
margin-left: 2px;
}Rules of thumb
Responsive CSS should reduce stress, not create more of it.
Use minimum hit areas
The visual icon can be small, but the clickable area should not be.
Add space between actions
Adjacent destructive and primary actions need room.
Support focus-visible
Keyboard users need clear focus states too.
Avoid hover-only UI
Touch users may never see hover behavior.
Use coarse pointer checks
Increase spacing when the input is less precise.
Test with thumbs
A design that works with a cursor may still fail on a phone.
Production thinking
Responsive quality is proven at awkward widths.
Why does this matter?
Touch target quality is one of the quickest ways to feel whether a responsive interface was actually tested on mobile.
Accessibility
Large, clear targets help users with motor limitations and users operating devices in imperfect conditions.
Production note
Audit every navigation item, form control and icon-only action at mobile widths.
SEO note
Usable mobile controls support better page experience and reduce frustration on mobile search traffic.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change min-height to 28px and explain why the control becomes worse.
- Remove gap and judge how easy it is to hit the right link.
- Add a hover style, then make sure the interface still works without hover.
Practice assignment
Do this before moving to the next lesson.
- Create three links or buttons that wrap on mobile.
- Use min-height and gap to make them finger-friendly.
- Add focus-visible styling and one pointer query.
Try it yourself
Create a touch-safe action row
Self-check
Before you continue, prove that you understand Touch Targets.
Answer these questions before moving on. If the answer is vague, resize the lab idea mentally and explain what should change.
- Can you explain why touch target size matters?
- Can you build an icon button with a larger hit area?
- Can you avoid hover-only interactions?
- Can you use pointer: coarse for touch adjustments?
- Can you test whether adjacent controls are too close?
Senior audit upgrade
Separate minimum compliance from comfortable touch.
WCAG 2.2 has a 24 by 24 CSS pixel target size criterion with exceptions. Around 44 by 44 remains a stronger comfort baseline for many interfaces.
24px minimum
Treat 24 by 24 CSS pixels as a baseline accessibility check, not as a premium target.
44px comfort
Use larger hit areas for primary mobile controls.
Visual vs clickable
An icon can look small while the button hit area remains large.
Chapter project
Make a component adapt anywhere
Use mobile-first CSS, media queries, container queries, fluid layout and touch targets without device guessing.
Build
a card grid that adapts by content width, not by random device names
Deliverables
- mobile-first layout
- content-driven breakpoint
- responsive image behavior
Quality checks
- works at small, medium and wide widths
- touch targets checked
- long words tested
Review question
Did content decide the breakpoint, or did a device name decide it?