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 and Style Icons

Emma Clark
Emma Clark
2,736 Points
Posted by Emma Clark
Emma Clark
2,736 Points

What is the Correct Answer To Add and style icons challenge

Please help! I can't find the correct answer to the Add and style icons challenge in Build a Website track With the anchor elements inside the contact-info list still selected, set the background size to 20 pixels square. Then set the left padding to 30 pixels, with all other padding at 0. What does 20 pixels square mean?

My answer: .contact-info a { display:block; min-height: 20px; background: no-repeat; background-size: 20px 20px 20px 20px; padding: 0 30px 0 0; }

Can anyone tell me where I have gone wrong?

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%;
}
ul.contact-info 
{
  font-size: 0.9em;
  padding:0;
  margin:0;
  list-style:none;
} 
.contact-info a
{
  display: block;
  min-height: 20px;
  background: no-repeat;
  background-size:20px 20px 20px 20px;
  padding: 0 30px 0 0;
}

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi Emma,

You're pretty close. For the no-repeat background, you need the CSS 'background-repeat' with the value of no-repeat. For the 20px square, it's just the way of saying 20px and 20px (which does equal 20px on all four sides. Also, your 30px left padding is in the wrong spot. Remember, the order of the numbers = Top, Right, Bottom, Left.

So, you final declaration should look like this: 

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
}

I hope that helps and clears some things up. One trick I've learned here is that in most challenges, the questions are taken straight out of the previous video(s). So the answer for this one is shown (and explained maybe better than I did) in the previous video starting at about 6:15.

Keep coding! :)

Emma Clark
Emma Clark
2,736 Points
Emma Clark
Emma Clark
2,736 Points

Hi Jason,

Thanks so much! :)

Emma

Joshua Harman
Joshua Harman
8,821 Points

Hey Emma :-) When you appreciate other's answers, like the one Jason gave, you should give them a thumbs up! It makes them feel good, and you'll get them back for a good answer too! (It's easier to start working on "collecting" them now then when you get to the end of your career Program, which is what I'm having to do lol)

Just a tip :-)