Learn Accessibility by Building a Quiz - Step 67

HTML-CSS
1

Tell us what’s happening:

what’s wrong???

Your code so far

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


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


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


/* 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/131.0.0.0 Safari/537.36

Challenge Information:

Learn Accessibility by Building a Quiz - Step 67

2

Hello @DarkMQ7,

As based from the direction, it should look like this:

@media (feature: value) {
  selector {
    styles
  }
}

You should place your @media (prefers-reduced-motion: no-preference) {...} as the outer part just like the example direction.

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

I did this but didn’t work out

4

almost there, remove the open and close curly braces around the (prefers-reduced-motion: no-preference)

Add curly braces around this instead:

* {
  scroll-behavior: smooth;
}
5

Didn’t work

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

* {
  scroll-behavior: smooth;
}
6

just a few additions, and it should work now.

just add an open curly brace right after the

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

and a close curly brace right after the

* {
  scroll-behavior: smooth;
}
7

it worked, thank you

1 Like
8

Your welcome, @DarkMQ7!! :heart_eyes: