Learn Accessibility by Building a Quiz - Step 57

HTML-CSS
1

Keeps saying- “You should use either a .info > label, .info > input or .info label, .info input selector.” What am I doing wrong?

.info > input {
  width: 50%;
  text-align: left;
  display: inline-block;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

2

What is the code above this?

3

This is the above code

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;
  display: inline-block;
}

.info>label {
  width: 10%;
  min-width: 55px;
  display: inline-block;
  text-align: right;
}
4

Hmm, sometimes this can be a missing } accidentally removed, but that doesn’t seem to be the case.

You clobbered the link to the challenge - can you put it back in your post please?

5

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 57

Link to the challenge:

6

I don’t think you should modify the existing selectors. You still need this represented:



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

.info label {
  width: 10%;
  min-width: 55px;
}
7

Add the required ‘display’ property and its value in the new group of selectors (above given in the challenge):

.info label, .info input {
   property: value;
}

and 'text-align" property and its value add to the existing .info label selector.

8

Can you offer any additional help? My brain is still very confused and I don’t understand what to do next.
What should I do if I am not modifying the existing selectors?

9

This is a challenge and it should be done as required. You should set display property to inline-block for input and corresponding label elements together. There is always another solution but in this step you should select two elements with a specific class:

.class element1, .class element2 {

 }

or

.class > element1,  .class > element2 {

Add the ‘text-align’ property set to ‘right’ to the existing .info label { } selector

1 Like
10 
Mod edit: solution redacted
11

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.

12

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