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 trialKimberly Skipper
2,176 PointsIcons are not showing to the left of the information on the contact page (phone, mail,twitter).
I am stuck. I tried to review my code and correct it but I can't find the problem. The icons are still showing up in my text instead of to the left of the information. Thank you for your help.
/****************** PAGE: CONTACT ******************/
.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; }
.contact-info li.phone a { background-image: url('../img/phone.png'); }
.contact-info li.phone a { background-image: url('../img/mail.png'); }
.contact-info li.phone a { background-image: url('../img/twitter.png'); }
2 Answers
Riho Rannamäe
3,784 PointsYou are missing a semicolon after the property "padding" in the ".contact-info a" selector.
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px; /* Here was the missing semicolon */
margin: 0 0 10px;
}
I hope this will fix your problem! :)
Victor Ruiz
16,570 PointsHi Kimberly,
The CSS looks correct from what I'm seeing. I would double check the html and verify everything is correct. Just refresh your browser a few times if not do command-shift + R. That should reset your cache.
The only thing I would add is a 0 at the end of margin as some browsers need the four properties in order to work.
.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 0; }
Let me know if that fixes it.
Best, Victor
Kimberly Skipper
2,176 PointsThank you Victor for your response. :)
Kimberly Skipper
2,176 PointsKimberly Skipper
2,176 PointsThank you this fixed the problem :)