Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialsergio verdeza
Courses Plus Student 10,765 PointsSelect 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
Courses Plus Student 10,765 PointsThis 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
Treehouse TeacherTo set any element to block level use this: display: block;
Alec Prince
554 PointsThe correct answer would be.
ul.contact-info a { display: block; }
Jaime Torres
8,157 PointsI'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
Courses Plus Student 10,765 PointsThanks to all you for your great help!!!
sergio verdeza
Courses Plus Student 10,765 PointsI'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; }
Jimmie Davis
1,658 PointsSelect 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
1,244 Pointsul.contact-info a { display: block; }
Rafael Alejandro Garduño E.
4,329 Points.contact-info a{ display: block; }
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; }
Grant Moran
5,918 PointsOriginally 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!
Ricardo Lara
942 Points.contact-info li a { display: block; }
Sean Clipsham
1,664 PointsI 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
5,450 Points.contact-info a { display: block;
Joshua Erskine
7,706 PointsHad the same problem. Very confused with the language of the "Code Challenge: 2/5". Solved with all these answers, thank you.
stephenallison
8,559 Points.contact-info a { display: block; } is the correct answer
Joe Hirst
Courses Plus Student 6,489 PointsSergio,
Here is a simple example using the CSS that you have used in your forum post.
li.contact-info a {
display: block;
}