Build a Quiz Webpage - Step 67

HTML-CSS
1

Tell us what’s happening:

hello, i’m having trouble understanding the last step of building a Quiz Webpage lab project, especially with wrapping the code within the @media rule. Any help/guidance will be highly appreciated

Your code so far

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


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


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

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

Challenge Information:

Build a Quiz Webpage - Step 67
https://www.freecodecamp.org/learn/full-stack-developer/workshop-accessibility-quiz/step-67

2

In the example given for @media at-rule:

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

you will want to replace feature, value and your selector{styles}, right?

First, what is the feature that was introduced?

3 
* {
  scroll-behaviour: smooth;
}

this was the first feature as per the question.
hello btw

4

That’s a universal CSS selector (*) and style so that would replace the selector { styles} bit in the example.

For now, wrap the style rule that sets scroll-behavior: smooth within a @media at-rule with the media feature prefers-reduced-motion having no-preference set as the value.

Read again the instruction above to find the feature and its value.

5

alright, thanks

lemme give it a try