Above the Fold
Above the fold is the portion of a web page visible without scrolling, the first thing a visitor sees when the page loads.
Key takeaways
- The fold moves with viewport size, zoom and browser chrome; no fixed pixel value exists.
- Sticky headers and consent banners consume height before your own content is drawn.
- Visibility is not persuasion; an irrelevant call to action above the fold still fails.
- Audit the fold at the phone and laptop heights your analytics actually report.
- A quiz start button belongs in view without scrolling on common mobile screens.
In depth
Above the fold is defined by the viewport, not by the page. The browser paints whatever fits the visible window at the current width, height and zoom level, so the boundary shifts with every device, every browser chrome and every rotation. Anything a visitor has to scroll to reach falls below it. Because the first paint is also the first judgement, this region carries the page's identity claim: who the page is for, what it offers, and the one action available right now.
The usable area shrinks faster than most teams expect. Sticky navigation bars, cookie consent banners, promotional strips and browser toolbars all take height before your content gets any. Large hero images push the call to action down, and heavy assets delay when it appears at all. The trade-off runs against completeness: every proof point, logo row or secondary link promoted into this space costs attention from the primary message, and a crowded fold reads as noise rather than as density.
Teams audit the fold on the two or three viewport sizes that dominate their analytics rather than designing against a desktop mock-up. The test is blunt: at that height, can a stranger say what this is and what to do next? On a quiz landing page that means an outcome-led headline, one line naming what the scorecard returns, and a start button visible without scrolling on a common phone screen, not only on a laptop display.
The fold is a threshold, not a wall. Visitors scroll willingly when the top of the page earns it, so packing every argument above the line usually backfires. The concept also says nothing about quality: an action that is visible but irrelevant converts worse than one found after a paragraph of context. For considered purchases the decision is rarely made in the first screen; the fold buys attention, and the rest of the page earns the lead.
Example in practice
How to measure it
Start with whether the primary action is seen at all. Element visibility or viewport impression tracking tells you what share of sessions ever rendered the button, split by device. Pair it with largest contentful paint, since a button that arrives late is effectively below the fold for impatient visitors. A high bounce rate combined with low button visibility points at layout rather than copy.
Then compare click-through on the top action against the same action repeated lower down. If the lower placement wins on mobile, the first screen is either too crowded or arriving too slowly. Scroll-start rate, the share of visitors who scroll at all, is the companion signal: near-immediate scrolling by almost everyone suggests the opening screen answered nothing.
Common mistakes
Designers approve the fold on a wide desktop monitor and never check a mid-size phone, where a sticky header and a consent banner can leave a strip of text and no button. Take screenshots at the three most common viewport heights in your analytics and mark where the primary action sits in each. If it falls below the line on any of them, shorten the headline or reduce the hero image height.
The other failure is treating the fold as a container to fill. Teams add a logo wall, a testimonial, three links and a video, and each element steals attention from the one that matters. Decide the single action the page wants, give it the strongest contrast on screen, and demote everything else below. Density in the first screen reduces clarity, and clarity is what makes those seconds count.
Frequently asked questions
Does above the fold still matter on mobile?
Yes, arguably more than on desktop. Mobile screens are smaller, so the visible area carries even less content, making it critical to lead with the value proposition and the primary call to action.
What should go above the fold on a quiz landing page?
A clear benefit-led headline, a one-sentence promise of what the quiz reveals, and a prominent start button. Supporting details, testimonials, and FAQs can live below the fold once the visitor scrolls.
Is the fold a fixed position?
No. It shifts with screen size, resolution, and browser chrome, so there is no single pixel line. Design for the most common viewports and test that your call to action stays visible across them.
How tall is above the fold in pixels?
There is no single number. Visible height depends on device, browser chrome, zoom and orientation, and it changes again when a sticky header or cookie banner claims space. Instead of designing to a fixed value, take the common viewport heights from your own analytics and check that the headline and primary action fit inside the smallest of them.
Should the form or CTA always sit above the fold?
The action should be visible or clearly signposted, but the form itself need not be. For complex or higher-commitment offers, a button that scrolls to the form often beats an immediate form the visitor is not yet ready to fill in. What matters is that the first screen makes the next step unmistakable.
Does above the fold affect page speed scores?
Indirectly. Core Web Vitals measure the largest visible element painting inside the initial viewport, so oversized hero images and late-loading fonts hurt both the score and the first impression. Compressing the hero image and preloading its font usually improves the measurement and the conversion path at the same time.
How much content belongs above the fold?
Enough to answer who this is for, what they get, and what to do next. In practice that is a headline, one supporting line and a single action, plus a visual if it clarifies the offer. Anything else competes for the same seconds. Material that supports rather than states the claim belongs further down.
Do cookie banners change what counts as above the fold?
Yes, and often severely on mobile, where a consent dialog can cover most of the screen until dismissed. Test the page in its pre-consent state, not only after acceptance. If the banner hides the headline entirely, reduce its height or anchor it to the bottom so the value claim survives the first render.
Is above the fold still relevant now that everyone scrolls?
It is relevant as an attention filter rather than as a hard limit. Scrolling is habitual, but the decision to keep scrolling is made from the first screen. The idea has shifted from making everything visible to earning the scroll, which is why the top of a page is now judged on clarity rather than on how much it holds.