Learn Accessibility by Building a Quiz - Step 67

Tell us what’s happening:

Step 67

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-motionhaving no-preference set as the value.

### Your code so far

* {
  scroll-behavior: smooth;
}

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

ERROR:
You should wrap the existing * rule within the @media rule.

Question:
Please help me solve this. I searched the forum and Google, and it said my code should be right. However, I am getting this error message. The course also didn’t cover anything about this until now.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.2 Safari/605.1.15

Challenge Information:

Learn Accessibility by Building a Quiz - Step 67

I see two * rules here. It says “wrap the existing * rule withing the @media rule” so you should not have the one outside the @media rule

1 Like

ahhh that was it. Thanks for helping!

1 Like