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 trialAlexandra Perry
820 PointsWhat 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; }
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
6,724 PointsHi 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
820 PointsThank you Martin! Do you know why we have to use the 20px twice? Thanks!
Martin Ellis
6,724 PointsThe 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.