challenge task - anchor elements inside unordered list with class contact-list

Question

I can't get this challenge task right. Here's my wrong answer:

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

This is exactly what I have on my project website, which is likely why it isn't displaying correctly...

css/main.css

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}

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

Answer 1 · 2017-03-29T09:52:25Z

March 29, 2017 9:52am

Hi Anna,

You're very close. try only targeting just the class.

Remember the challenge is to: select the unordered list with the class contact-info

Also remember selectors work in reverse: .contact-info ul a {…} --> selects/applies the class attributes to an <a> anchor inside a <ul> unordered list inside a parent object with the class .contact-info, thus only selecting/styling anchor tags (see example below):

<div class="contact-info">
    <ul>
        <li>
            <a>your link</a>
        </li>
    </ul>
</div>

Answer 2 · 2017-03-30T01:38:44Z

March 30, 2017 1:38am

Thank you! But I still don't get it. :( The challenge question, or the project.

I watched the video again, but that didn't help. My project code looks exactly like his project code (I've checked countless times), but it doesn't work - on the challenge, or on my site.

Here's my code for the project:

/************************** 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-style: 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'); }

On my site, it looks like this:

Contact Details

class="phone"> 559-978-4250 class="mail"> ynotanna@hotmail.com class="twitter"> @ynot_anna

Answer 3 · 2017-04-01T04:53:48Z

April 1, 2017 4:53am

Thanks again! I got through the challenge, and realized that my project issue was coming from the html, not the css. Other than an extra Twitter bird flying around, everything seems fine now. :-)

Welcome to the Treehouse Community

Looking to learn something new?

Anna Parker

Anna Parker

challenge task - anchor elements inside unordered list with class contact-list

3 Answers

Glenré Charl Labuschagné

Glenré Charl Labuschagné

Anna Parker

Anna Parker

Glenré Charl Labuschagné

Glenré Charl Labuschagné

Anna Parker

Anna Parker