Learn Accessibility by Building a Quiz - Step 56

HTML-CSS
1

I’m having trouble with this step of the challenge.

My code is written correctly, but it says it’s not correct. I don’t understand what’s going on and I need help.

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


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

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

Your browser information:

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

Challenge: Learn Accessibility by Building a Quiz - Step 56

Link to the challenge:

2

what hint are you getting?

3

image

I did as the tip is indicating but it is not working for me.

4

the hint says to give the label element a text-align of right.
Where is your text-align statement now?
(is it only being applied to label elements? or to more than that?)

5

image
image1123×344 19.9 KB

It’s here as indicated but it’s not working. I do not understand why

6

look carefully, is the text-align: right being applied only to label elements?

edit: for eg. If you look at the min-width property. Which elements are getting that property?

7

Now I realized where the problem was and I fixed it. thank you man

1 Like
8

The test has a bug in it.

Your code is correct.

@hbar1st The following CSS makes both input and label elements that are descendants of div elements with class="info" have right text alignment.

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

Then, in the following line:

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

only the input elements that are descendants of div elements with class = info are set with left text alignment. So in the end, only the label elements have right aligned text. Otherwise, you would see the text in the input elements shifted to the right (which is not the case here).

9

i always wondered why they insisted on having that new block be at the top. But maybe the intention was to have the 2 rules in it? (not sure)

10

Regardless, the tests should pass valid (and correct) CSS.

11

I added a comment mentioning that you found a bug here:

12

also Shaun opened an issue

13

To understand what happened, that was the required solution until a couple of weeks ago, but it was requiring to do a confusing usage of precedence rules without saying so