Learn Accessibility by Building a Quiz - Step 57

[billyironcrane]

I’ve attached my code, which I believe properly addresses the challenge.

However, when checking my answer, I get the following:
“Code does not pass.
Hint: You should use either a .info > label, .info > input or .info label, .info input selector.”

It seems I am being told to do something which I’ve already done. Any suggestions?

Please copy/paste all the editor code showing in the challenge from where you just linked.

.info input {
  width: 50%;
  text-align: left;  
  }
.info label {  
  width: 10%;
  min-width: 55px;  
  text-align: right;
  }
.info label, .info input {
  display: inline-block;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0

Challenge: Learn Accessibility by Building a Quiz - Step 57

Link to the challenge:

freeCodeCamp.org

[bbsmooth]

The snippet you pasted above passes for me. It could be that you accidentally changed something else we aren’t seeing. Always include all of your code so we can help you find these types of errors (assuming that’s what it is).

[billyironcrane]

OK … here’s all my code.

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 input {
  width: 50%;
  text-align: left;  
  }
.info label {  
  width: 10%;
  min-width: 55px;  
  text-align: right;
  }
.info label, .info input {
  display: inline-block;
  }
  p::before {
  content: "Question #";
}

.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;
}

[billyironcrane]

@billyironcrane

.info input {
  width: 50%;
  text-align: left;  
  }
.info label {  
  width: 10%;
  min-width: 55px;  
  text-align: right;
  }
.info label, .info input {
  display: inline-block;
  }

OK … problem solved. I copied my answer to a notepad, then reset the challenge, and then pasted my code back in and re-checked. The code passed without further issue. Thanks for your insight … it put me on the right track.

[hbar1st]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').