• Success Criterion 1.4.10
  • Conformance level AA

Sticky Bars That Eat Up Most of a 320px Mobile Screen

1.4.10 — Reflow

Scenario

Setting

A budget airline's flight search results

What’s wrong

Sticky headers/footers/cookie banners consuming most of the 320px viewport, leaving no usable content area.

Example 

.site-header { position: sticky; top: 0; height: 120px; }
.cookie-banner { position: fixed; bottom: 0; height: 110px; }
.filter-bar { position: sticky; top: 120px; height: 90px; }

Why it matters

On a 320px-tall mobile viewport in landscape, these three bars alone can consume most of the visible screen, leaving only a sliver for flight results.

How to test

Set the viewport to 320px and check sticky headers/footers/cookie banners: if they consume most of the available screen space, leaving little usable content area, it fails.

How to fix

Keep only what truly needs to stay pinned, and shrink sticky elements at small viewport heights with a media query.

.site-header { position: sticky; top: 0; height: 56px; }
.cookie-banner { position: static; }
.filter-bar { position: static; }

Outcome

A traveler on a phone sees several flight results at once instead of a screen mostly covered by banners.

Who is affected

Mobile travelers, especially in landscape orientation, are left with almost no room to see or compare flight results.

Learn more

Related scenarios