Short answer: A web page has no fixed size. It's fluid — it fills the browser window, which varies by device. What matters is designing for a range of viewport widths (roughly 320px to 1920px+), using standard breakpoints to change the layout, and keeping the readable content within a max-width of about 1100–1300px on large screens so lines of text don't get too long. Height is unlimited — pages scroll.
Why there's no single answer
The old idea of "the web page is 960px wide" came from an era of desktop-only monitors. Today a page is viewed on phones, tablets, laptops, large monitors and TVs. A well-built page responds to whatever width it's given.
The widths that matter in 2026
| Device class | Typical viewport width | Notes |
|---|---|---|
| Small phone | 320–375px | Design the tightest layout here first |
| Large phone | 390–430px | Most mobile traffic |
| Tablet | 768–834px | Portrait tablet, small laptop split-screen |
| Laptop | 1024–1440px | The most common desktop range |
| Desktop / large | 1536–1920px+ | Content stays centred; margins grow |
Design mobile-first: build the small layout, then add complexity as the screen grows.
Common breakpoints
These are where the layout typically changes:
- 480px — small phone → large phone tweaks
- 768px — phone → tablet (single column → two columns)
- 1024px — tablet → laptop (full navigation, multi-column)
- 1280–1440px — laptop → desktop (wider content, more whitespace)
Content max-width
Even on a 1920px screen, you don't want text spanning the whole width — long lines are hard to read. Keep the main content column to about 65–75 characters per line, which is roughly 640–760px for body text, inside an overall container of 1100–1300px.
Height and the fold
Pages scroll, so total height is unlimited. "Above the fold" still matters — the first ~700–900px on desktop and ~600px on mobile is what people see before scrolling, so put your key message and action there.
Safe areas
On modern phones, account for the notch and the home indicator with CSS so content and fixed bars aren't clipped.
Key takeaways
- A web page is fluid — there's no fixed width or height.
- Design mobile-first for ~320–430px, then use breakpoints at 480 / 768 / 1024 / 1280.
- Keep readable content to ~640–760px wide inside a ~1100–1300px container.
- Put the key message and CTA in the first screen (~600px mobile, ~800px desktop).
FAQ
What size should I design my mockups at?
Is there a maximum page width?
How tall should a landing page be?
Alamin Sultan
Web developer for real estate and e‑commerce. WordPress · Next.js · MERN.