What Does Above the Fold Mean in Web Design?

What it applies to

Every webpage — but especially homepages, landing pages, and campaign pages where first impressions determine whether a visitor stays or leaves.

How it works

• The "fold" is not a fixed pixel point — it shifts based on screen resolution, device type, and browser chrome height. A common reference range is 600–900px from the top on desktop, and 400–600px on mobile.
• Design tools like Figma let you set a viewport guide at the expected fold height so you can see exactly what is visible on load before any scrolling.
• In Webflow, set a min-height on your Hero section to 100vh so it always fills the viewport, keeping the CTA visible regardless of screen size.
• Use Google Search Console and session recording tools (Hotjar, Clarity) to check whether your primary CTA appears above the fold across real device types visiting your site.

What to put above the fold

• Primary headline and subheadline
• One clear CTA button
• A trust signal (client logos, star rating, or a single strong stat)
• A supporting visual that reinforces the headline

Common mistake

Designing only for your own screen. A layout that looks perfect at 1440px may push the CTA below the fold at 1280px or on a 13-inch laptop. Always test at multiple viewport heights.