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 How to Make a Website Adding Pages to a Website Add Iconography

Posted by anthony scalise
anthony scalise
2,050 Points

contacts 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
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Hi 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.

main.css 
/*********************
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');
}