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 Responsive Web Design and Testing Responsive Web Design

Patrik Olausson
Patrik Olausson
8,202 Points
Posted by Patrik Olausson
Patrik Olausson
8,202 Points

Having trouble with the contact icons not displaying correctly.

Hi! I'm having trouble with displaying the phone, twitter and mail icons correctly. I'm getting the same result that Nick did in a earlier video. The icons seem to be a lot bigger and is placed behind the text. Nick fixed this with padding and margin. When I edit the padding for the .contact-info it reacts but nothing is happening when I change the margin. So my amateur guess is that it has something to do with this. Something constricting the margin, idk...

Please help!

From contact.html:

<section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:0721 506070">0721 560607</a> </li>
          <li class="mail"><a href="mailto:bla@gmail.com">Email!</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>

From main.css:

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

.contact-info {
  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.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}

And from responsive.css:

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }

2 Answers

jeremie singler
jeremie singler
4,569 Points

In your css you havé ,contac-Info{} twice So thé second .contact-Info{} over ride thé first one

CSS means Cascading style sheet

You need To havé thé first .contact-info{}

And thé second To BE

.contact-Info a{}

Which is à différent sélector

Hope this help

Patrik Olausson
Patrik Olausson
8,202 Points
Patrik Olausson
Patrik Olausson
8,202 Points

Oh I missed adding the a! Now it all makes sense.

Thank you Jeremie!

jeremie singler
jeremie singler
4,569 Points
jeremie singler
jeremie singler
4,569 Points

hello , 

.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; */
}

and add a tag at the second .contact-info rule or it will overwrite the first .contact info

I hope this will help .

Patrik Olausson
Patrik Olausson
8,202 Points
Patrik Olausson
Patrik Olausson
8,202 Points

"and add a tag at the second .contact-info rule or it will overwrite the first .contact info" What do you mean by that?

Removing the margin made no difference.

Thank you for answering!