Above the fold
Also called the fold or first viewport
The part of a page visible before anyone scrolls, ending at the fold: the bottom edge of the screen, which moves with every screen size.
// 64px header + 40px of the next section peeking in = 104px.
// svh fits phones, where 100vh can be taller than the visible area.
export function LandingPage() {
return (
<>
<header className='flex h-16 items-center border-b px-6 font-semibold'>
Tripmate
</header>
<section className='grid min-h-[calc(100svh-104px)] content-center justify-items-center gap-6 px-6 text-center'>
<h1 className='max-w-3xl text-4xl font-bold tracking-tight md:text-6xl'>
Plan your next trip together
</h1>
<p className='max-w-xl text-lg text-muted-foreground'>
Share the itinerary, split costs, and vote on what to do next.
</p>
<a
href='/signup'
className='rounded-full bg-primary px-6 py-3 font-medium text-primary-foreground'
>
Start free
</a>
</section>
{/* Its top edge shows above the fold, a hint that there is more below. */}
<section className='border-t bg-muted px-6 py-16 text-center'>
<h2 className='text-2xl font-semibold'>Everything in one place</h2>
</section>
</>
);
}Make sure the headline, subhead, and "Start free" button sit above the fold on a 1440×900 laptop and a 390×844 phone. Set the hero height to calc(100svh - 104px) so the top 40px of the next section peeks in below the 64px header, and shrink the hero image on phones if it pushes the button down.
Paste into Layerwise or any AI coding tool.
What is Above the fold?
The term comes from newspapers, where only the top half of the folded front page showed on the newsstand. On the web, the fold is the bottom edge of the browser window when a page first loads. Everyone sees what is above it; only people who choose to scroll see what is below.
Put the essentials above the fold: what the product is, why it matters, and the main call to action. You do not need to fit everything there. People scroll happily when the top of the page gives them a reason to, and a sliver of the next section peeking in tells them there is more.
There is no single fold. A laptop browser shows roughly 650 to 900px of height, a phone shows a narrow column where content stacks and pushes further down, and a large monitor shows much more, so check a few common sizes. On phones, 100vh can be taller than the visible area because of the browser toolbars; 100svh and 100dvh fit the screen more reliably.
Often confused with
- Hero section
- The hero is a specific section with a headline, call to action, and visual. Above the fold describes whatever happens to be visible before scrolling.
Related terms
All termsHero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
Responsive design
Designing one layout that adapts to any screen width, rearranging columns, sizes, and navigation at set widths called breakpoints.
Scroll reveal
An animation that fades or slides content into place as it scrolls into view, so each section appears just as the reader reaches it.
Lazy loading
A technique that waits to load images, videos, or code until they are about to scroll into view, so the first screen loads faster.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.
