Learn Accessibility by Building a Quiz - Step 66

HTML-CSS
1

Tell us what’s happening:

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.

Mycode so far

  • {
    scroll-behavior: smooth;
    }
2

Please include the link to the Step. Also, please talk to us in your own words about how you are stuck. Thanks

1 Like
3

Step 66

Certain types of motion-based animations can cause discomfort for some users. In particular, people with vestibular disorders have sensitivity to certain motion triggers.

The @media at-rule has a media feature called prefers-reduced-motion to set CSS based on the user’s preferences. It can take one of the following values:

  • reduce
  • no-preference
4

OK.

  1. You did not provide a link to the challenge you are working on

  2. You did not describe in your own words how you are stuck

We are humans here… Please talk to us like humans.

5

This is the link

here

6

Ok. And a description in your own words of what has you confused?

It doesn’t look like you tried anything yet. What terms are confusing you?

1 Like
7

I do not know how to go by it as my attempts do not pass…kindly find the instruction attached below:

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.

8

I see the instructions. You are basically saying “It isn’t working. Do it for me”. I’m trying to get you to actually talk to me and tell me what about the instructions is confusing you.

I’m not allowed to do it for you. It is easier for me to help if you tell me what specific parts you don’t understand.

What code have you tried? The code you posted is the starting code.

I don’t see a media query. Have you tired to add a @media query? That’s the very first thing you need to do.

2 Likes
9

Kindly find below my attempt:

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

* {
  scroll-behavior: smooth;
}
10

This needs to be inside of your new media query

This isn’t part of the instructions

What feature and value do the instructions tell you to use for this media query?

1 Like
11

It tells me to…:

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.

12

… I can read the instructions. Please stop copy-pasting it at me.

Can you identify the specific parts of the instructions that tell you what the feature and it’s value are?

13

I am a newbie in this…it’s unfortunate I do not know how to tell you what you’re asking me.

I thank you for your time and efforts and apologize for stressing you out :expressionless:

14

I’m not stressed. I’m just asking you to talk to me like a person instead of making a bunch of copies of the instructions. I know the instructions… I’m trying to get you to read specific parts of the instructions.

Let’s look for the word ‘feature’

Ah, there it is

And where is the word value?

Oh there it is…

So what should you put in your code there?

15

I do not know how to go by the @media rule

16

Did you try putting the specific values from the instructions in the place of feature and value in the last code you posted? What does your code look like if you try that?

17

Can you please tell me what to do / how to do it?

I already used @media as a selector and it didn’t pass. Thank you.

18

I’m literally telling you what to do.

I cannot write the answer for you. That is against the rules.

You should try this.

19

Tell us what’s happening:
I was asked to 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.

Your code so far
@media {
prefers-reduced-motion: no-preference;
scroll-behavior: smooth;
}

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/104.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 66

Link to the challenge:

1 Like
20

Hi @smnharuna

Please refer to the given example

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

prefers-reduced-motion is a feature and no-preference is the value of said feature.

Whatever is inside the media selector will be filled like normal CSS rules.

Hope that helps.

1 Like