Learn Accessibility by Building a Quiz - Step 67

HTML-CSS
1

Tell us what’s happening: * {
prefers-reduced-motion: smooth;

}
@media (prefers-reduced-motion: no-preference) {

}
I have challenge advancing this stage. I need help please.
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.

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 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 67

Link to the challenge:

2 
* {
 scroll-behavior: smooth;

}

Hi, you have to put this code inside the media rule. Reset and try it again

3

I don’t understand your explanation.

4

hi there, can you ask me a more specific question?
For eg. I used 2 sentences in my explanation. Which one was the confusing one?

5

Happy new year Sir. I have been stuck in this No. 67 for sometimes now. How do I apply the @media (prefers-reduced-motion) rule?

6

Just type it exactly as given to you.

7

this is what I did…

  • {scroll-behavior: smooth;
    @media(prefers-reduced-motion: no preference);
    }
    And this is the error message I’m getting;
    “You should have one @media(prefers-reduced-motion: no preference)” rule
8

The @media rule should be the outer rule. (You have it in reverse)

9

Again, I did this…
@media (prefers-reduced-motion: no-preference) {scroll-behavior: smooth;
}
and the response I got is this…
You should have one @media (prefers-reduced-motion: no-preference) rule.

10

You deleted the asterisk that was there at the start? (Plus also you deleted some parenthesis that were given to you)
However the idea is correct now.

Try to reset and add your code without deleting anything

11

I did this…
*@media(prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
I’m still getting " You should have one @media(prefers-reduced-motion: no preference) rule

12

This should be within the media query.

No such thing as this

13

I did this…
@media(prefers-reduced-motion: no-preference) *{
scroll-behavior: smooth;}
And it’s not still working.

14

You have just written this , css selection is such:

target{}

not
target

15

I did this now…
@media {prefers-reduced-motion: no-preference;}
*{scroll-behavior: smooth;}

And it still didn’t work.

16

This should be within

Like this target{ target2{} }

17

I did this…
@media{prefers-reduced-motion: no-preference
*{scroll-behavior: smooth;}
}
It still didn’t work.

18

Don’t change the above.

prefers-reduced-motion: no-preference is not in side the curly bracket

1 Like
19

Thanks a bunch. I just got it right.

1 Like