Intermediate
Calm the banner for reduced motion
The banner wiggles forever. Keep the wiggle for most people, but add a prefers-reduced-motion: reduce media query that switches the animation off for people who asked their device for less motion.
Give reduced-motion users a still way to notice the banner instead, such as a thick outline.
What Check tests
- Without a preference, the banner still wiggles
- There is a prefers-reduced-motion: reduce media query
- Inside it, the banner's animation is switched off
- Reduced-motion users get a still highlight
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.