Above the fold

Everything visible when a page loads, before anyone scrolls. From newspapers sold folded in half on the stand.

what you see without scrollingthe top screen bitabove the fouldfirst screenbefore you scrollthe part that fits on the phonetop of page areavisible on load

See it

Live demo coming soon

What it is

Borrowed from newspapers, where the front page was folded in half on the newsstand and only the top half sold the paper. On the web it means whatever fills the viewport when the page loads, before a single scroll. It is the region you get for free, so it usually carries the promise and the primary action.

Use it as a priority filter, not a container. Ask what one idea has to land in the first two seconds, put that up there, and let everything else earn its place further down. Leaving a visible hint of the next section (a cut-off card, a peeking image edge) gives people a cue that there is more below, which is a reasonable thing to try and a good thing to test, not a guaranteed lift.

Gotcha: there is no fold. It moves with every device, browser chrome, zoom level, and rotated phone, so 'above the fold' is a range, not a pixel value. And the old myth that nobody scrolls died years ago: cramming six messages into the first screen loses more people than a calm hero plus a scroll cue.

Ask AI for it

Design the above-the-fold area of this page for a 900px-tall desktop viewport and a 667px-tall phone: fit only the logo bar, the headline, one supporting line, and the primary button, and make sure the top edge of the next section peeks into view so it reads as scrollable. Move every secondary message below. Do not force sections to exactly 100vh, and verify nothing important is cut off at 375px wide.

You might have meant

hero sectionvisual hierarchysticky headerresponsive layoutcontent width

Go deeper