For designers

Design for short screens with vertical breakpoints

Breakpoints usually follow the width of the screen, but laptops are often short. A height query lets a page change its layout when there isn't room above the fold.

Desktop designs are usually drawn on a 1440 × 900 frame. Many laptops show far less page than that: on a 1280 × 720 screen, once the browser’s tabs and toolbar and the computer’s own taskbar are drawn, the page gets about 600px of height. Width breakpoints don’t notice, so the short laptop gets the full desktop layout, and the hero pushes everything else below the fold.

A vertical breakpoint is a media query on the screen’s height. It lets the layout change when the screen is short, whatever its width. Our design tokens have seven width breakpoints and none for height, so this is a decision to make for each design.

Try it

The page was designed at 1440 × 900, with an 80px header and a 420px hero image. It starts on a small laptop, where the button is below the screen. Switch the height queries on, then try the phone on its side.

600px
Auctions · Departments · Sell · Sign in
Travellers hurry up a hillside path through driving rain, rendered as diagonal woodblock lines.

Live auction · London, 3–7 November

Sudden Shower at Shōno, from Fifty-three Stations of the Tōkaidō, 1834–35

Utagawa Hiroshige (1797–1858). Estimate: US$30,000–50,000

Register to bid

More lots from this auction follow below the hero.

1280 × 600

The screen is scaled down to fit this page. The sizes in the readout are the real ones.

What it means for your designs

The fold moves with the height of the screen, not the width. A layout that fits at 1440 × 900 can lose its button at 1280 × 600, and a phone on its side has about 340px of page.

  • Draw a short frame alongside the tall one: 1280 × 600 for a small laptop. Check what’s above the fold.
  • Size tall things, such as hero images, by the height of the screen, with a sensible minimum, rather than at a fixed height.
  • Count what a sticky header costs. An 80px header is 9% of a 900px screen and 24% of a phone on its side.
  • Zoom makes screens shorter too. At 200%, a laptop with 1440 × 790 of page behaves like one with 720 × 395.

In Figma

Add a frame at 1280 × 600 for each key page, and draw the fold on it. If the layout changes there, make it a variant and note the height where it switches, as you would for a width: “Below 700px tall: 56px header, hero image 36% of the screen’s height.”

A phone on its side is worth one frame too, at about 844 × 340. Note whether the header should stay put or scroll away.

Say this to a developer

“Can we add height breakpoints to the page? Below 700px tall the header gets shorter and the hero image is sized by the screen’s height. Below 420px the header scrolls away and the image and text sit side by side.”

Short screens
@media (height < 700px) {
  .site-header {
    block-size: 56px;
  }


  .hero__image {
    block-size: 36svh;
  }
}


@media (height < 420px) {
  .site-header {
    position: static;
  }


  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Watch out for

Gotcha

A short browser window on a large screen matches the same query as a short laptop. That’s usually right, since the problem is the same: not much room above the fold.

  • Rearrange or shrink things on short screens rather than hiding them. Content that only exists on tall screens is lost to anyone zoomed in.
  • Things fixed to the screen, such as a cookie banner or a chat button, take a bigger share of a short screen. Include them in the short frame.

Browser support

Height queries work in every browser. The shorter `(height < 700px)` form works in every current browser, and every browser since March 2023: Chrome and Edge 104, Firefox 63 and Safari 16.4.