Learn Accessibility by Building a Quiz - Step 67

HTML-CSS
1

Tell us what’s happening:

I couldn’t pass the 67 steps. i have tried a lot.
here is my code :

  • {
    scroll-behavior: smooth;
    }
    @media (prefers-reduced-motion: reduce) {
    • {
      scroll-behavior: auto;
      }
      }

Your code so far

<!-- file: index.html -->


/* file: styles.css */
/* User Editable Region */

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

/* User Editable Region */

Your browser information:

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

Challenge Information:

Learn Accessibility by Building a Quiz - Step 67

2

you need to wrap this in the media rule, and you need to have the media rule be applied for prefers-reduced-motion having no-preference set as the value.

3

i couldn’t get it. would you give me brief explanation.

4

if you mean like this, same error

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

}

5

that is wrong syntax for a media rule with inside style rules

this is correct syntax, but you have the wrong values: the scroll behaviour rule needs a value of smooth, and the media have to check for a prefers-reduced-motion of no-preference

6

no change , here is my code:

  • {
    scroll-behavior: smooth;
    }

@media (prefers-reduced-motion: reduce) {

  • {
    scroll-behavior: auto;
    }
    }
7

would you explain me this sentence " You should have one @media (prefers-reduced-motion: no-preference) rule." i am receiving this message every time i click submit button…

8

delete this rule that is outside the media rule

you need to have prefers-reduced-motion: no-preference here

1 Like
9

here is my code. now i’m getting another error message
@media (prefers-reduced-motion: no-preference) {

  • {
    scroll-behavior: auto;
    }
    }
    this is the error message: You should wrap the existing * rule within the @media rule.
10

thanks for your guide , i passed this code. so i can go to FRIDAY PRAYER NOW

11

You saved my life :+1:

12

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