Learn Accessibility by Building a Quiz - Step 67

HTML-CSS
1

Tell us what’s happening:

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15

Challenge: Learn Accessibility by Building a Quiz - Step 67

Link to the challenge:

2

Your code was too large to bring over from the challenge. Please use the format button that looks like </> and paste your code in between the lines it gives you. You will have to use it once for any html you have and once for your css

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

3

Wrap the style rule that sets scroll-behavior: smooth within an @media at-rule with the media feature prefers-reduced-motion having no-preference set as the value.
https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg

4

Thats not your code. That’s just the directions needed to pass the step. We need to see your code. Follow the steps I posted above

5 
@media (prefers-reduced-motion: no-preference) {
Scroll-behavior:  reduce smooth;
@media: no-preference;
}

My apologies. I’m still learning the functions of this website. I am trying to figure out how to wrap the original code and at-rule style. Also, I’m working on an IPad and it’s a little tough trying to copy my code and posting it. Thanks for your assistance in advance.

6

So this is the structure you want to follow

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

You currently have two media when you only need one. Also you are missing the selector part of this structure. Do you know what selector you are using?

7

Honestly no. I would guess a ‘class’ selector would be used for customizing special commands. But the ‘*’ was not in my code. I was trying different ways to pass the challenge but I ran out of ideas.

8

You would not be using the class selector. When you first start the challenge this is the code they start you out with

* {
  scroll-behavior: smooth;
}

You are supposed to wrap the media around this code that they gave you. So * is the selector you are going to use. Now try to put the code together using the structure

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

Ok, I figured it out after you explained the structure that I should follow. Whew! It wasn’t that difficult. I guess I was overthinking the challenge. Thank you a bunch Cody.

1 Like
10

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