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 trialanthony scalise
2,050 Pointscontacts not showing up. Also Contact LI alignment messed up?
Here's my snapshot.. not sure whatsup with the contacts? https://w.trhou.se/e72rnc1xsz
1 Answer
Sean T. Unwin
28,690 PointsHi there Anthony,
Compare the changes I made below to the same section ('Page: Contact') in your CSS.
The primary differences are that I put the icons and their styling in the .contact-list li
background and adjusted the padding on .contact-list li a
. You will also see that I added a background-color
on the same li
's as well as change the font color
on the a
.
The phone number is outside of the anchor tag in contact.html
so that should be changed as well.
/*********************
Page: Contact
*********************/
.contact-info {
list-style:none;
padding:10;
margin: 0 0 5px 10px;
font-size:0.9em;
}
.contact-info li {
width: 10em;
background-color: orange;
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: -3px -3px;
}
.contact-info li > a {
display:block;
min-height:20px;
padding: 4px 0 0 30px;
margin: 0 0 10px 0;
color: #1B1A16;
}
.contact-info li.phone {
background-image: url('../img/phone.png');
}
.contact-info li.mail {
background-image: url('../img/mail.png');
}
.contact-info li.twitter {
background-image: url('../img/twitter.png');
}