Back to quality gates
first-viewport-fit
First Viewport Fit
A hero-led entry fits its header, identity, subject crop, orientation, proof, and primary action within one declared short-viewport budget.
Quality gatesRecommended
Intent
Prevent double-counted header and hero heights, oversized display type, unsafe media crops, and excessive spacing from pushing required content outside the visible first screen.
Checks
- At default text size, inspect the longest real entry at a representative short desktop and short mobile height after fixed chrome and safe areas.
- Verify an integrated header and hero share one viewport-height wrapper, or subtract the measured external header height from the hero budget.
- Record the visible viewport height, fixed-chrome bottom, required-content bottom, hero boundary, and first meaningful next-section cue; reject clipping, overlap, hidden actions, empty-background reveals, or a title that crowds out required proof.
- Inspect the rendered media crop and reject cuts through products, faces, labels, or other must-see subject evidence.
- At text zoom, allow natural vertical growth and verify every item remains reachable rather than preserving the one-screen composition.
Warnings
- Width-only screenshots miss vertical failures caused by short laptops, mobile browser chrome, and accidental title wrapping.
- An external header above an independent `100svh` hero makes the first-screen composition taller than the viewport.
- Do not force a pass by shrinking body text or controls below readable sizes, transform-scaling the hero, or hiding overflow.
Exceptions
- An explicitly requested poster or immersive title screen may spend more than one viewport on its entry when required actions and content remain reachable and unclipped.