Repair workflow
- Set a responsive viewport.
- Find the element causing horizontal overflow.
- Increase small targets or spacing.
- Review very small text in its real context.
Issue library · 5 mobile usability checks
Viewport, overflow, tap target, and text-size issues
Make the rendered page readable and operable without zooming, tiny targets, or unintended sideways scrolling.
Direct answer
Use the device viewport, prevent horizontal overflow, and provide readable text and tappable controls. Verify the real page at narrow widths rather than relying on desktop assumptions.
Why this area matters
Mobile layout problems block reading and interaction. They can also contribute to poor engagement and page-experience signals.
Verification checklist
- Test at narrow and wide viewport sizes.
- Navigate every frequent control by touch and keyboard.
- Confirm no essential content requires horizontal scrolling.
Exact findings explained
Viewport declaration is missing
The page does not tell mobile browsers how to size the layout viewport.
What to do
Add width=device-width and an appropriate initial scale.
How to verify
Open the page on a narrow device and inspect the rendered viewport tag.
Viewport does not use device width
The declaration may force an unsuitable fixed or virtual width.
What to do
Use width=device-width unless a documented application constraint requires another behavior.
How to verify
Inspect the tag and test multiple device widths.
Page scrolls sideways
The document is wider than its visible viewport.
What to do
Identify the overflowing element, then constrain media, tables, code, and layout tracks appropriately.
How to verify
Test the narrowest supported width and confirm document scroll width matches the viewport.
Controls are difficult to tap
Some visible controls are smaller than 24 by 24 CSS pixels.
What to do
Increase target dimensions or spacing, especially for frequent actions.
How to verify
Test with touch input and confirm adjacent controls can be activated accurately.
Very small text is widespread
Several visible text elements render below 12px.
What to do
Increase important text and reserve small sizes for genuinely secondary labels.
How to verify
Review at 100% zoom on a narrow screen and confirm all instructions are readable.