Learn Accessibility by Building a Quiz - Step 67

Need help not sure how I would add do this. This is the question
Certain types of motion-based animations can cause discomfort for some users. In particular, people with vestibular disorders have sensitivity to certain motion triggers.

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.

This is the error I am currently getting

You should have one @media (prefers-reduced-motion: no-preference) rule.

Your code so far

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

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.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

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:

“Wrap the style rule that sets scroll-behavior: smooth within an @media at-rule…”

This means you are going to put the @media at-rule around the existing rule set. You appear to have put it inside of the existing rule set.

“with the media feature prefers-reduced-motion having no-preference set as the value.”

Look at the example:

@media (feature: value) {

So you need to replace feature with the media feature the instructions are asking you to use and replace value with the value they are asking you to use. Notice that they are both inside of the parens.

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

This is what I have right now but it is still incorrect.

You are still intermingling the existing rule set with the media query you are applying to it. This is the existing ruleset:

* {
  scroll-behavior: smooth;
}

That entire ruleset gets wrapped by the media query at-rule you want to add. That means the entire ruleset should be inside the at-rule you are adding.

Look at the example again. I’ve added comments to make it clearer.

@media (feature: value) { /* begin at-rule */
  
  /* existing rule set*/
  selector {
    styles
  }

} /* end at-rule */

Thanks man appreciate it

1 Like

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