Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Help with: Adding Pages - Adding Iconography

Ok so I have coded my CSS to look exactly like in the video, except without a Twitter link, since I don't have one. I used an example email for right now as well. Now, when I go look at my webpage, it puts the email icon below the phone, but instead of the email address being next to the icon, it puts it below. It also puts it in gray instead of green. See photo. What am I missing here?

[IMG]http://i60.tinypic.com/2hnp06w.png[/IMG]

mrx3
mrx3
8,742 Points
  .contact-info a {
    display: block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 0 0 0 30px;
    margin: 0 0 0 10px;
    text-decoration: none;
  }
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Eric: Not sure if the problem is with the css or html. Can you copy/paste the relevant css and html here (Check the Markdown Cheatsheet below if you're not sure how to do that)? Maybe change your phone number first.

mrx3
mrx3
8,742 Points

I pasted the css code above, maybe you can check yours with the above copy.

The only different between my code and the one you have Mr X is that my margin only has 3 values, as shown below, which gives the space between the list items that I want for mobile browsing.

Shawn, here is my code:

<p>.contact-info {
  list-style: none;
  padding: 10px;
  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.mail a {
  background-image: url('../img/mail.png');
}
</p>
<p><section>
            <h3> Contact Details</h3>
            <ul class="contact-info">
              <li class="phone"><a href="tel:503-111-1111">503-111-1111</a></li>
              <li class="mail"><a href="mailto:eric@example.com"></a>eric@example.com</li>
            </ul>
          </section></p>

I added a 3rd 0, making it look like so:

margin: 0 0 0 10px;

but that made it look funny haha

4 Answers

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points

It looks like you closed your mail anchor tag before your address. Try moving it to the end.

mrx3
mrx3
8,742 Points

Good catch shawn I think that's it.

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

And in case that wasn't clear, it should look like this: <li class="mail"><a href="mailto:eric@example.com">eric@example.com</a></li>

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points

It looks like you closed your mail anchor tag before your address. Try moving it to the end.

mrx3
mrx3
8,742 Points

Eric have you tried it with the four values? Give it a try and let me know how it works out.

That did it! Thanks so much guys! it definitely helps to have another pair of eyes look over your code, it's easy to miss something when you are the one that typed it. Especially because I have no prior experience, and this whole thing is very new to me. Still getting used to the order that syntax needs to be in.

mrx3
mrx3
8,742 Points

Sorry I missed that Eric. I'm glad you got it to work. Thanks Shawn for catching that.