Learn Accessibility by Building a Quiz - Step 67

Tell us what’s happening:

I have used MDN and even a prior post on here about this and it appears to my eyes lol that this should work.

the HINT just says " You should have one @media (prefers-reduced-motion: no-preference) rule."

Your code so far

@media (prefers-reduced-motion: no preference){
  * {
    scroll-behavior: smooth;
    }
}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.


The @media at-rule has a media feature called prefers-reduced-motion to set CSS based on the user's preferences. It can take one of the following values:

reduce
no-preference
@media (feature: value) {
  selector {
    styles
  }
}
Wrap the style rule that sets scroll-behavior: smooth within an @media at-rule with the media feature prefers-reduced-motion having no-preference set as the value.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Learn Accessibility by Building a Quiz - Step 67

Check the first line syntactically…a small hickup occured :slight_smile:

@media (prefers-reduced-motion: no preference){
  * {
    scroll-behavior: smooth;
    }
}

You need a - dash between no preference. @mountaineer03

1 Like

man I am blind lol. Thanks for the help

2 Likes

Your welcome. Happy Coding!

Hello bro,
I put the same code but still gives me this message : " You should wrap the existing * rule within the @media rule." !!!

here is my code !
@media (prefers-reduced-motion: no-preference) {
*{
scroll-behavior: smooth;
}
}

You maybe have issue in other part of your code. You need to create your own topic. There’s I give better suggestions for your code.
@Mahfoud