Learn Accessibility by Building a Quiz - Step 67

HTML-CSS
1

I’m lost. What on earth does this mean??
You should have one @media (prefers-reduced-motion: no-preference) rule.

Your code so far

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.

* { @media (prefers-reduced-motion: no-preference)
  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/115.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 67

Link to the challenge:

2

Hi!

Have a look at the syntax format the exercise gives you.
The selector might not be at the right spot in your solution.

3

I tried this and got: You should have one @media (prefers-reduced-motion: no-preference) rule.

I’ve also tried putting the @media next to the universal selection (*). No luck

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

@media is not a property you can put inside a CSS rule you should put the CSS rule inside the @media Think of them as conditions. If they are true, the CSS rules inside of them will be applied

5

So I’ve tried this and still the same error message. I’ve even set the @media as a separate selector with the property of prefers-reduced-motion: no-preference; and nada. I’ve tried every permutation I can think of with no luck :frowning:

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

Try it like this
Mod edit: Removed Solution

1 Like
8

THANK YOU!!! I have never seen a CSS element nested like that so I learned something new

9

@ojimena594

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

10

Always pay attention to the example in the instructions. For this step it was


@media (feature: value) {
  selector {
    styles
  }
}

That how I found out where the (*) selector must be placed

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.