Landing Page Size: Standard Width, Hero Height and Image Dimensions for Desktop and Mobile
Standard landing page sizes: design widths for desktop and mobile, content width, hero height above the fold, image dimensions and file size limits.
On this page
- Most landing pages are designed at 1440px wide for desktop and 375px to 390px for mobile, with content capped at about 1140px to 1280px.
- Height isn't fixed; fit the offer, one line of proof and the main button in the first screen, roughly the top 600px on a phone.
- Upload hero images about 1920px wide as compressed WebP, smaller images for sections, and a 1200 x 630px social share image.
There is no single standard landing page size, but most landing pages are designed at 1440px wide for desktop and 375px to 390px wide for mobile, with the main content kept inside a container of about 1140px to 1280px so it reads well on laptops.
Height is not fixed: a landing page scrolls. What matters is what fits in the first screen, so the sizes below focus on widths, the hero area and images.
Common landing page sizes
| Item | Common size | Why |
|---|---|---|
| Desktop design frame | 1440px wide | A common laptop and desktop width; designs scale down to 1280px and 1366px laptops |
| Content container | 1140px to 1280px max width | Keeps lines and layouts readable on wide screens |
| Text column | About 600px to 720px | Roughly 60 to 80 characters per line, comfortable to read |
| Mobile design frame | 375px to 390px wide | Matches common phone widths in CSS pixels |
| Tablet check | 768px wide | Catches layouts that break between phone and laptop |
| Desktop first screen | About 650px to 800px visible height | What fits on a typical laptop after the browser bar |
| Mobile first screen | About 600px to 700px visible height | Varies with phone and browser bars |
Most visitors to Indian small business landing pages arrive on phones from ads, WhatsApp or Google, so design the 375px version first and check it on a real phone.
How to size the hero section
- Put the offer, one line of proof and the main button in the first screen. On a 375px phone that is roughly the top 600px.
- Don't force the hero to
100vhon mobile. A full-height hero pushes everything else down, and mobile browser bars change the height as you scroll. Amin-heightthat fits the content is safer. - Keep the headline short enough to fit in two or three lines at about 28px to 36px on mobile.
- Show the form or button without scrolling, or a clear button that jumps to it.
Image sizes for landing pages
| Image | Upload size | File size goal |
|---|---|---|
| Full-width hero background | 1920px wide (2560px only if it must be very sharp on large screens) | Under about 200KB as WebP or AVIF |
| Hero image beside text | About 1000px to 1200px wide | Under about 150KB |
| Feature or service images | About 600px to 800px wide | Under about 80KB each |
| Logos and icons | SVG where possible | A few KB |
| Social share (Open Graph) image | 1200 x 630px | Under about 300KB |
These are working targets, not rules. Upload images at about twice the size they display for sharp phone screens, then let WordPress create smaller versions through srcset. Set width and height on images so the layout doesn't jump while loading.
How long should a landing page be?
As long as the offer needs. A simple offer for warm traffic, such as a free consultation for people who searched your service, can work in three or four sections. A higher-priced or unfamiliar offer needs more proof, answers to objections and FAQs. Repeat the call to action after every two or three sections so nobody has to scroll back up.
Sizes in WordPress and Elementor
- In Elementor, set the content width at Site Settings > Layout > Content Width, for example 1140px.
- Check the breakpoints at Site Settings > Layout > Breakpoints. Defaults are mobile up to 767px and tablet up to 1024px.
- Preview each breakpoint with the device icons at the bottom of the editor, then check on a real phone, because the editor preview doesn't show browser bars.
- In the block editor, theme settings at Appearance > Editor > Styles > Layout control content and wide widths for block themes.
Edge cases
- "Desktop site" on phones. Some visitors have Chrome's Desktop site setting turned on and see a shrunken 980px layout. If a client says the page looks tiny on their phone, check this first.
- Large text settings. Many people raise font size on their phones, which can push buttons below the first screen. Test with the phone's text size increased.
- Ultra-wide monitors. Without a max width, a 2560px screen stretches text lines across the whole screen. Always cap the container.
Size is only one part of a page that converts; see landing page mistakes that waste Google Ads budget, or let our landing page design service build and test it for you.
FAQs
What is the standard landing page width?
Design at 1440px wide for desktop with content capped at about 1140px to 1280px, and at 375px to 390px for mobile.
What size should a landing page hero image be?
About 1920px wide for a full-width background, or about 1000px to 1200px when it sits beside text, compressed to WebP.
What is above the fold on mobile?
Roughly the top 600px to 700px on most phones, which is enough for a headline, a line of proof and one button.
Need help with your website?
I'm a freelance WordPress developer building fast, SEO-friendly websites since 2020. Tell me what you need and I'll reply with a plan and a fixed quote, usually within 24 hours.
Freelance WordPress development, building websites for clinics, manufacturers, agencies and online stores since 2020.
More about me
