Form Labels or Inputs That Clip at Narrow Screen Widths

1.4.10 — Reflow

Scenario

A bank's mobile money-transfer screen

Form layouts where labels/inputs clip or inputs shrink to unusable widths.

.transfer-form label { width: 220px; display: inline-block; }
.transfer-form input { width: 400px; }

At 320px wide, the fixed 220px label and 400px input together are wider than the screen, so the amount field gets clipped and unusable.

Set the viewport to 320px and check form layouts: labels/inputs that clip or shrink to unusably narrow widths fail.

Stack labels above inputs and size inputs relative to their container instead of fixed pixel widths.

.transfer-form label { display: block; width: auto; }
.transfer-form input { width: 100%; box-sizing: border-box; }

A customer sees the full amount field on their phone and completes the transfer without guessing at hidden digits.

Mobile users trying to enter a transfer amount can't see or reliably tap the clipped input field.