Learn Accessibility by Building a Quiz - Step 67

HTML-CSS
1

Tell us what’s happening:

Your code so far
{
@media scroll-behavior: smooth; (prefers-reduced-motion: no-preference ); {
selector {
styles
} scroll-behavior: smooth;
}
*{
scroll-behavior: smooth;
}
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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 67

Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-67`Preformatted text`

I could not figure out what really not right in this code. Please help.

  • List item
2

Hello!

It appears the @media query has been placed within selector brackets.

If the selector brackets are removed from around the @media query, I believe your code should pass.

3

Thank you so much pudgie22, yes I remove the selector brackets still the system did not pass. Here is what I did still not work. Thank

  • {
    @media scroll-behavior: smooth;(prefer-reduced-motion: no-preference) ;
    selector
    styles
    scroll-behavior: smooth;
    }
4

ou should have one

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

rule. You should wrap the existing

*

rule within the

@media

rule.
The above is system response

5

I am sorry for the misunderstandings.
Please reset the step and only add the @media query before the original code, placing the brackets before the * and at the end of the complete code? Do not add anything extra.
I hope I am clear for you to understand me.

6

Mod edit: removed solution

7

I have removed the solution from your post.

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
8

Thank you pudgie22, I appreciated your effort to see that I solve this challenge. But honestly I do not understand what you meant by original code. which one is original and where to place the *. Thanks a lot.

9

When the step is reset, there is code already there for you to add the @media query.

What you should see when Step 67 is reset is:

  • {
    scroll-behavior: smooth;
    }

You have the right idea. But, need to make the few changes. :slight_smile:
Happy coding!

10

Pudgie22 you are great, really appreciated your help, the challenge is solve.

11

anjanaaa_ nair, you are great, really appreciated your help, the challenge is solve.

12

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