Learn Accessibility by Building a Quiz - Step 67

[erimbonyi17]

I am enable to solve this challenge. Can I get help of understanding this challenge?

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 67

Link to the challenge:

freeCodeCamp.org

[Cody_Biggs]

We will need to see your code to figure out what is going wrong. When you reply please use the format button </>, and paste all your code between the two lines it gives you

[erimbonyi17]

step 67. Question
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

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

---

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.

-----------------MY CODE SO FAR----------------

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

body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
  text-align: center;
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;
}

nav > ul > li {
  color: #dfdfe2;
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
}

nav > ul > li:hover {
  background-color: #dfdfe2;
  color: #1b1b32;
  cursor: pointer;
}

li > a {
  color: inherit;
  text-decoration: none;
}

main {
  padding-top: 50px;
}

section {
  width: 80%;
  margin: 0 auto 10px auto;
  max-width: 600px;
}

h1,
h2 {
  font-family: Verdana, Tahoma;
}

h2 {
  border-bottom: 4px solid #dfdfe2;
  margin-top: 0px;
  padding-top: 60px;
}

.info {
  padding: 10px 0 0 5px;
}

.formrow {
  margin-top: 30px;
  padding: 0px 15px;
}

input {
  font-size: 16px;
}

.info label, .info input {
  display: inline-block;
}

.info input {
  width: 50%;
  text-align: left;
}

.info label {
  width: 10%;
  min-width: 55px;
  text-align: right;
}

.question-block {
  text-align: left;
  display: block;
  width: 100%;
  margin-top: 20px;
  padding-top: 5px;
}

p {
  margin-top: 5px;
  padding-left: 15px;
  font-size: 20px;
}

p::before {
  content: "Question #";
}

.question {
  border: none;
  padding-bottom: 0;
}

.answers-list {
  list-style: none;
  padding: 0;
}

button {
  display: block;
  margin: 40px auto;
  width: 40%;
  padding: 15px;
  font-size: 23px;
  background: #d0d0d5;
  border: 3px solid #3b3b4f;
}

footer {
  background-color: #2a2a40;
  display: flex;
  justify-content: center;
}

footer,
footer a {
  color: #dfdfe2;
}

address {
  text-align: center;
  padding: 0.3em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[lioba]

Hi, in the info you copied, you also posted the right way to set up an @media at-rule. See, here:

@erimbonyi17

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

This means your @media is the first part of the at-rule. Can you figure out where to put the other parts from this example?
You can find some more useful information here if you need other examples:

CSS @media Rule

[erimbonyi17]

@lioba I am able figure out feature and value.

@media (prefers-reduced-motion) {
  selector {
    style
  }
}

Is scroll-behavior a selector?
and smooth as a value?

[lioba]

I like that you’re using the template to figure out each element as you go!
Your selector is given in the editable area, it is *, as in, you are selecting all elements in the document.
For style, you need to use the existing style rule that is already given.

[lioba]

@erimbonyi17

prefers-reduced-motion

Keep in mind that this feature needs a value. Look again at the last sentence of the instructions.

[erimbonyi17]

@lioba Thank you for guiding me but I just corrected and my code is not passing.

* {
  scroll-behavior: smooth;
}

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

What is the issue here?

[Cody_Biggs]

You should not be adding an individual style like this

* {
  scroll-behavior: smooth;
}

It all needs to be inside your media. Take what you have at the top and replace it with the * style you have at the bottom

[erimbonyi17]

@Cody_Biggs Thank you so much.

I am going to learn about media.

[lioba]

Has it worked out for you?

[erimbonyi17]

Yeah, it worked. Thank you