Learn Accessibility by Building a Quiz - Step 67

[holiday387]

I’ve tried everything I can think of, but I just can’t get it. I’m not sue where to place the @media rule.

• @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.

  scroll-behavior: smooth;
}

Your browser information:

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

Challenge: Learn Accessibility by Building a Quiz - Step 67

Link to the challenge:

freeCodeCamp.org

[anon86258595]

You should wrap your @media rule around your your whole selector which has the scroll behavior attribute.
This means that your * selector should be nested between the curly brackets of your @media rule.
Presently you have the attribute scroll behavior inside your @media rule without its selector:

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

You should take the whole selector:

*{
  scroll-behavior: smooth;
  }

And place it within the curly brackets of your @media rule:

 @media(prefers-reduced-motion:no-preference){
 #move your * selector with its attribute here!
}

Hope this helps!

[holiday387]

I tried it and no luck.

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

[holiday387]

I have the closing bracket, I didn’t know I didn’t copy it.

[anon86258595]

You should paste your code between the ```` marks that appear when clicking the </> button so that it gets formatted properly:

[anon86258595]

Also remember that I said to place your whole * selector inside the @media rule as @media isn’t a selector:

*{
scroll-behavior:smooth
}