---
title: "Hero sized with `100vh` / `h-screen` (lint/vh-hero)"
description: "lint/vh-hero: 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…"
canonical: https://void-design.vercel.app/rules/lint/vh-hero
lastModified: 2026-09-16
---

# Hero sized with `100vh` / `h-screen`

`lint/vh-hero` · severity **info** · category Lint · detected by `void lint` and `void audit`

## 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

- https://web.dev/blog/viewport-units

## More lint rules

`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.

- `ease-in-enter` `ease-in` used for an entrance or hover — [lint/ease-in-enter](https://void-design.vercel.app/rules/lint/ease-in-enter)
- `long-ui-duration` UI feedback transition longer than 500ms — [lint/long-ui-duration](https://void-design.vercel.app/rules/lint/long-ui-duration)
- `no-reduced-motion` Animations present but no `prefers-reduced-motion` handling anywhere — [lint/no-reduced-motion](https://void-design.vercel.app/rules/lint/no-reduced-motion)
- `overflow-x-hidden-sticky` `overflow-x: hidden` on html/body/root wrapper breaks `position: sticky` — [lint/overflow-x-hidden-sticky](https://void-design.vercel.app/rules/lint/overflow-x-hidden-sticky)
- `will-change-static` `will-change` applied statically to many elements — [lint/will-change-static](https://void-design.vercel.app/rules/lint/will-change-static)
- `z-index-soup` Many distinct z-index values — [lint/z-index-soup](https://void-design.vercel.app/rules/lint/z-index-soup)
- `hardcoded-colors` Hard-coded colors in components instead of tokens — [lint/hardcoded-colors](https://void-design.vercel.app/rules/lint/hardcoded-colors)
- `missing-metadata` Page has no `metadata` / `generateMetadata` and inherits only the root title — [lint/missing-metadata](https://void-design.vercel.app/rules/lint/missing-metadata)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/vh-hero`