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 trialhaphyz Gbenle
Courses Plus Student 711 PointsAdding background size to an element on css
"with the anchor elements inside the contact-info list still selected , set the background size to 20 pixel square. Then set the left padding 30 pixels, with padding at 0."
The quote above is the instruction i've bin asked to carry out in a task.
But i keep getting a bummer asking me if i set the background size of the contact-info link to 20px.
Please look at my code and help me find what i'm doing wrong. I labelled it task 4
Thanks.
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:0px;
padding: 0px;
list-style: none;
}/**************************
task 4
**************************/
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
}
.contact-info a{
background-size: 20px;
padding-left: 30px;
}
3 Answers
Kieran Black
9,139 PointsHi Haphyz,
You seem to be setting it to:
min-height: 20px;
I think you need:
background-size: 20px;
Hope that helps KB
Russell Sawyer
Front End Web Development Techdegree Student 15,705 PointsYou're very close.
.contact-info {
font-size: 0.9em;
margin: 0;
padding: 0;
list-style: none;
}
.contact-info a {
display: block;
min-height: 20px;
background: no-repeat;
background-size: 20px 20px; /*<== the background squared got me the first time too. */
padding: 0 0 0 30px; /*<== You can also represent padding-left this way*/
}
Tanja Schmidt
11,798 PointsHi, you're missing the "square" in 20px square - just add another 20px right after the other. :) Also you should add the last two properties to the selector above, for good practice.
.contact-info a{
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding-left: 30px;
}
Hope, I could help! Happy Coding!