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

HTML How to Make a Website Adding Pages to a Website Add and Style Icons

Posted by Jonathan Cooper
Jonathan Cooper
11,938 Points

What is the proper answer for this challenge task?

Add and Style Icons code challenge task 4.

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 {
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px;
  padding: 0 0 0 30px;
Jonathan Cooper
Jonathan Cooper
11,938 Points

I don't know what I'm doing wrong.

2 Answers

bothxp
bothxp
16,510 Points

The task is:

"Challenge Task 4 of 5

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

Looking at your CSS you are very nearly there. The answer that passed for me was:

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

Your problem was with the background-size property.

If you just give it the one value

 background-size: 20px;

then that will just set the width to 20px. A value of 'auto' will be automatically used for the height with auto being "the keyword that scales the background image in the corresponding direction such that its intrinsic proportion is maintained."

As the question asked for 20px square, I believe that it is asking you to make sure that the background is set to 20px in both width and height, hence we use

 background-size: 20px 20px;
Krzysztof Kucharzyk
seal-mask
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points
Krzysztof Kucharzyk
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points

I don't remember what was the question in this task but as I recall correctly you had to make background-size 20px square. So your code suppose to be like:

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