Mobile Overflow and Form Labels

Why this matters

Most visitors arrive on phones, and most beginner testing happens on desktop. Overflow you never see still blocks every phone visitor; an unlabeled field still defeats screen readers and confused tappers. Both fixes are small, both are forever: learn them once and every page you ever make passes.

Concepts

Overflow hunt. Narrow the browser to 360px. Scroll down; then try scrolling sideways. Any sideways movement is the bug. Usual suspects: nowrap text (lesson M03L9's menu), fixed-width images wider than the screen, long unbroken strings (URLs, addresses), form inputs with fixed widths. Fixes: let text wrap, cap images to the container width, let inputs fill their container. Re-check after each fix: narrow, scroll both ways, confirm only vertical.

Every field gets a label. A label element naming the field ("Your name", "Pickup time") that stays visible before, during and after typing. Placeholder hints may accompany labels but never replace them: placeholders vanish on input, stay unread by many assistive tools, and turn the completed form into anonymous boxes nobody can review. Check: fill the form, then read each value back against its visible label.

The two-width test. Every visual change is checked at 360px (phone) and at desktop, with eyes plus one tap on the main button. Thirty seconds, two sizes, one interaction. Lesson M02L8's visual criteria live here: "no sideways scroll at 360px", "button reachable without scrolling", "labels visible with values filled".

Worked example

The bakery menu at 360px: the dish line runs off-screen (nowrap), the photo is 900px wide in a 360px column, the order inputs are 500px fixed. Three one-line fixes: wrapping on, image capped, inputs fluid. The form: two placeholders and no labels become two labels plus shorter placeholders. Total: five lines changed, page now passes both widths and a screen reader.

Expected result: your page passing the two-width test with labeled fields, noted as three yes-or-no lines.

The common wrong move

Fixing overflow by shrinking text until it fits ("font-size 8px"). Tiny text fits and nobody can read it. Wrap and fluid widths preserve readability; shrinking destroys it.

Lab and next step

Lab A11 runs the overflow hunt plus label repair on a provided page. Next, lesson 16 shows how to ask for visual fixes with screenshots that point at the exact spot.