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 trial

CSS

Posted by Johnathan Kail
Johnathan Kail
9,476 Points

Need help with "Select the anchor elements inside the contact-info list"

Challenge task 2 of 5 Select the anchor elements inside the contact-info list. Then set them to block level elements.

I keep getting the error of: Bummer! Did you set the display for links inside of the contact-info list to block?

Can somebody help me with this error.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Johnathan,

What code are you trying so far?

4 Answers

Casey Antoine
PLUS
Casey Antoine
Courses Plus Student 5,174 Points
Casey Antoine
Casey Antoine
Courses Plus Student 5,174 Points

Hey Johnathan,

If you could give an example of the code you have written that is giving you the error.

From the description you've given I'd say its likely they're looking for:

li a {
    display: block;
}

or possibly:

.contact-list a{
 display: block;
}

hope this helps.

James Home
James Home
12,011 Points
James Home
James Home
12,011 Points

It is super awkward to see where you've gone wrong without the code that you've used. This is how I imagine it should work:

.contact-info a {
    display: block;
 }

I assume from the error message that you are not setting the display to block, so the anchors (the "a" tag) is defaulted to "inline" so that it appears beside each other. You want it almost like a list, where you have the items under each other.

I hope I helped.

Johnathan Kail
Johnathan Kail
9,476 Points
Johnathan Kail
Johnathan Kail
9,476 Points

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

}

.conact-info a{ display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; } these are the codes im using from the lesson and it said to add a block to the display

James Home
James Home
12,011 Points
James Home
James Home
12,011 Points

You made a typo in the CSS class, "conact-info" should be "contact-info". 

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

.contact-info a { 
    display: block; 
    min-height: 20px; 
    background-repeat: no-repeat; 
    background-size: 20px 20px; 
    padding: 0 0 0 30px; 
    margin: 0 0 10px; 
} 

<div class="contact-info">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
</div>

I debugged it by looking at the rendered page in the browser and there was no CSS applied to the the anchor.