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

Alexandra Perry
Alexandra Perry
820 Points
Posted by Alexandra Perry
Alexandra Perry
820 Points

What is wrong in my code?

Hello I am on a task in Treehouse and it says to make the background-size 20 px. My code is below. It doesn't seem to be recognizing that the background-size is 20 px. It won't let me move onto the next step and just keeps prompting for the background size;

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

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;
  padding: 0;
  font-size: 0.9em;
}

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;
  background-size: 20px}


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

2 Answers

Martin Ellis
Martin Ellis
6,724 Points
Martin Ellis
Martin Ellis
6,724 Points

Hi Alexandra,

The challenge asks you to set the background to 20px square, meaning 20px height and 20px width.

Set your code as 

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

And the task should pass. Hope this helps :)

Alexandra Perry
Alexandra Perry
820 Points
Alexandra Perry
Alexandra Perry
820 Points

Thank you Martin! Do you know why we have to use the 20px twice? Thanks!

Martin Ellis
Martin Ellis
6,724 Points
Martin Ellis
Martin Ellis
6,724 Points

The first number sets the width of the background and the second number sets the height, it just so happens in this example that they are both 20px but they can be different numbers. If you only put background size: 20px; you are only setting the width, the height would be automatically set by the browser. The challenge asks for a 20px squared (20px by 20px) background so both values need to be set to 20px.