Learn accessibility by building a quiz step 56

I’m on the part where we’re supposed to align the text right. I’ve tried placing the script in all three parts seen below. As far as I know, based on the instructions:

Step 56

To align the input boxes with each other, set the display property to inline-block for all input and label elements within .info elements.

Also, align the text to the right.

it’s meant to go in the last section like so:

Your code so far

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

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

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

But this gives me the error of:

Test

Sorry, your code does not pass. Hang in there.
Hint

You should set the text-align: right property before the .info input rule.

I’m not sure what I’m doing incorrectly here. Any hints or helps would be greatly appreciated!

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:100.0) Gecko/20100101 Firefox/100.0

Challenge: Step 56

Link to the challenge:

1 Like

Hi @ alofferman

If you put your .info label, .info input rule before (above) the individual .info input and .info label rules, then I think your code should pass the tests.

(Before you change your code, look at the way the D.O.B placeholder is displayed, and try entering some text in the Name/Email input boxes.
Then try the same thing once you’ve made the change.
You should see a difference.)

5 Likes

Thank you very much! This helped with my issue!

hi @alofferman ,

use this code it definitely will work.

.info input , .info label {
text-align: right;
display:inline-block;

}

.info input {
width: 50%;

}

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

}

2 Likes

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