Skip to content

Rule · Lint

Hero sized with 100vh / h-screen

lint/vh-heroinfovoid lintupdated

Why it matters

On mobile 100vh is the largest viewport (URL bar hidden), so full-height heroes are cut off behind the browser UI and jump when the bar collapses.

How to fix it

Use dynamic/small viewport units: min-h-svh or min-h-dvh (100svh, 100dvh).

Example

tsx
<section className="min-h-svh">…</section>

References

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.