Learn Accessibility by Building a Quiz - Step 67

Tell us what’s happening:

I need help with this step. i don’t understand what i have to do.

Code:

  • {
    scroll-behavior: smooth;
    }

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-motion` having `no-preference` set as the value.
1 Like

If you try a step three times, a help button will appear.
image

Clicking it will create a post with a link to the step your on, all your code so far and can be edited to include your question, an explanation of what you’ve tried and any other information you think relevant.

The step wants you to place some code into a media query.
They also give you the ‘feature’ and ‘value’

Here is an example of the same step but using different feature, value and code.
(This is an example, not the answer)

  • Wrap the style rule that sets background-color within a @media at-rule with the media feature max-width having 700px set as the value.
* {
  background-color: blue;
}

The answer to the example would be:

@media (max-width: 700px) {
  * {
    background-color: blue;
  }
}

2 Likes

Thanks, this time i think i understand better! :slight_smile:

2 Likes

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