While researching a UX case study on a Mexican mobile carrier's website, I widened my browser window and watched the homepage disappear behind its own banner.
The banner was an image stretched to 100% of the width. On my screen it took 44% of the first view. Add the header bars, and the first product started at 60% of the screen. Plans, prices and the way to your account were all below the fold.
It looked fine on the laptop it was probably designed on. It was a problem on everything wider.
The math
A full-width image with a fixed aspect ratio has a height that depends only on the width:
height = viewport width ÷ aspect ratio That banner had a ratio of about 3.7 to 1. So:
| Screen | Banner height | Share of the visible height |
|---|---|---|
| 1440 × 900 laptop | ~390 px | ~45% |
| 2560 × 1080 (21:9) | ~690 px | ~70% |
| 3440 × 1440 (21:9) | ~930 px | ~70% |
| 5120 × 1440 (32:9) | ~1380 px | more than the whole screen |
The wider the screen, the less of your page people see. And ultrawide monitors are common among exactly the people who use a desktop all day for work.
Why it's also an accessibility problem
An ultrawide screen isn't a WCAG criterion on its own. What it does is make existing problems bigger:
- Text inside the image (WCAG 1.4.5). The headline, the deadline and even a URL were part of the picture. Screen readers can't read it, users can't zoom it without the image pixelating, and nobody can copy the link.
- Inverted hierarchy. The banner text scaled up with the image while the navigation stayed small. The biggest thing on the page was the ad; the smallest was the menu.
- Tiny controls, far apart (WCAG 2.5.8). Carousel dots smaller than 24 px, and arrows pinned to the edges, 2,000+ px apart.
- Auto-rotation (WCAG 2.2.2). If it moves for more than 5 seconds, people need a way to pause it.
The fix
Four rules got me most of the way in my redesign:
1. Cap the content width. The page can be 3440 px wide; your content doesn't have to be.
.container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; } 2. Give the banner a height, not just a ratio. Let it flex within limits instead of growing forever.
.hero { height: clamp(240px, 30vw, 360px); max-height: 40vh; display: flex; overflow: hidden; } 3. Keep text out of the image. Text goes in HTML, and the image only fills its own area.
<section class="hero" aria-roledescription="carousel" aria-label="Promotions"> <div class="hero-copy"> <h2>Register your line before November 15</h2> <p>Your deadline depends on the last digit of your number.</p> <a href="/register" class="button">Register now</a> </div> <img class="hero-media" src="promo.jpg" alt=""> </section> .hero-copy { flex: 1 1 55%; padding: 36px 40px; } .hero-media { flex: 1 1 45%; object-fit: cover; min-width: 0; } A decorative image gets an empty alt; if the image carries meaning, describe it.
4. Real controls, real size. Buttons with names, at least 44 × 44 px, close to each other, and a pause button if anything moves.
<button type="button" aria-label="Pause promotions">…</button> How to test it without an ultrawide monitor
- In Chrome DevTools, open device mode (Ctrl+Shift+M) and type 3440 × 1440, then 2560 × 1080.
- Or zoom out to 50% on a 1920 px screen: the page lays out as if it were about 3840 px wide.
- Ask one question: what can a person do without scrolling? If the answer is "look at an ad", the banner is too big.
The real lesson
The banner wasn't a CSS bug. It was a priority decision that the CSS made visible: the promotion came first, and what the person came to do came second. Capping the height is the technical fix. Deciding what deserves the first screen is the design one.
This was one finding from a bigger case study on activation, registration and information hierarchy across an email, an app and a website. You can read the full case, with prototypes, on my site: Activated doesn't mean working.
