Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Add and Style Icons

sergio verdeza
PLUS
sergio verdeza
Courses Plus Student 10,765 Points

Select the anchor elements inside the contact-info list. Then set them to block level elements.

Not really sure how to answer this question? I know what and block level element is and an inline level element. so far I have the following code:

li.contact-info a {

}

17 Answers

sergio verdeza
PLUS
sergio verdeza
Courses Plus Student 10,765 Points

This is the correct answer:

.contact-info a { display: block; }

I was getting confuse with the word list so I was adding a li.

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

To set any element to block level use this: display: block;

Alec Prince
Alec Prince
554 Points

The correct answer would be.

ul.contact-info a { display: block; }

I'd try something like this if there is no class and you only want the anchor in the list

ul a { code; }

If the class is your list...

<ul class="contact-info"> <a></a>

then I'd try something like

.contact-info a { code; }

Let me know if this helps.

sergio verdeza
PLUS
sergio verdeza
Courses Plus Student 10,765 Points

I'm getting this message: Did you set the display for links inside of the contact-info list to block?

Not sure why?

This is the code I wrote

li.contact-info a { display: block; }

Select the anchor elements inside the contact-info list. Then set them to block level elements.

.contact-info { font-size: 0.9em; margin: 0; padding: 0; list-style: none; }

/****** When I input this one below it says its wrong.*****/ /********************************************************************/

.contact-info a { display: block; font-size: 0.9em; margin: 0; padding: 0; list-style: none; }

Bei Zhang
Bei Zhang
1,244 Points

ul.contact-info a { display: block; }

.contact-info a{ display: block; }

Alan Inman
Alan Inman
1,595 Points

/This is the only way it worked for me/

.contact-info { margin: 0; padding: 0; list-style: none; font-size: 0.9em; }

ul.contact-info a { display: block; }

Originally I had interpreted the question with an instinctive thought of "easy enough, list means li". So thinking such I created:

li.contact-info a {
   display: block;
}

The reason this does not work and where I believe the confusion comes from is because the anchor element being targeted is inside of the ul element with the class of "contact-info". At this point we are applying a style to ALL anchor elements in our unordered list. We then will further style our list by attaching new rules to each li element.

With this in mind the correct answer becomes:

ul.contact-info a {
   display: block;
}

Disclaimer: My post could be very obvious but I find it great reinforcement to try to explain things I have found confusing to gain further clarity. If any of this is incorrect please let me know!

.contact-info li a { display: block; }

I have tried all the solutions on this page and others in the forum and none worked, but this does: .contact-info, .contact-info li a { font-size: 0.9em; margin: 0; padding: 0; list-style: none; display: block; }

alex49
alex49
5,450 Points

.contact-info a { display: block;

Joshua Erskine
Joshua Erskine
7,706 Points

Had the same problem. Very confused with the language of the "Code Challenge: 2/5". Solved with all these answers, thank you.

stephenallison
stephenallison
8,559 Points

.contact-info a { display: block; } is the correct answer

Joe Hirst
PLUS
Joe Hirst
Courses Plus Student 6,489 Points

Sergio,

Here is a simple example using the CSS that you have used in your forum post.

li.contact-info a {
   display: block;
}