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

Liam Hayes
seal-mask
.a{fill-rule:evenodd;}techdegree
Liam Hayes
Full Stack JavaScript Techdegree Student 13,116 Points
Posted by Liam Hayes
.a{fill-rule:evenodd;}techdegree
Liam Hayes
Full Stack JavaScript Techdegree Student 13,116 Points

CSS Challenge: Add and Style Icons

Link to the challenge: https://teamtreehouse.com/library/add-and-style-icons

Hey guys, I'm stuck in this part of the code challenge for some reason. Anybody know how to make the challenge budge? This is the question

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.

This is my code

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

This is the error it gives me

Bummer: Did you set the background size for contact-info links to 20px?

Anybody know what's wrong here? Thank you! :)

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Liam Hayes! Unfortunately, you haven't linked the challenge, but I can tell you where I suspect the problem lies. I feel like you missed this bit of the instructions:

set the background size to 20 pixels square.

Instead of setting the background size to 20 pixels square, yours is set to 20px. We say "square" when the height and width are the same size. The background-size property takes either a keyword, or a height and width, but you've only given one dimension here.

Where you have:

background-size: 20px;

I would expect to see:

background-size: 20px 20px;

This tells CSS to make our background size have a height and width of 20 px or "20 pixels square".

Hope this helps! :sparkles:

Liam Hayes
seal-mask
.a{fill-rule:evenodd;}techdegree
Liam Hayes
Full Stack JavaScript Techdegree Student 13,116 Points
Liam Hayes
.a{fill-rule:evenodd;}techdegree
Liam Hayes
Full Stack JavaScript Techdegree Student 13,116 Points

Thank you Jennifer :)

This is the link to the challenge. I also put it in my initial post now: https://teamtreehouse.com/library/add-and-style-icons

You know, you're probably right. Thing is, gosh I'm getting so frustrated with this challenge. My problem was with part 4 of the challenge. Now, when I try to go back into the challenge, I can't get past part 1 but I feel confident that my code is exactly what it's asking me to do. Is it possible my challenge is glitching right now?

Now the challenge is asking me this: 

Challenge Task 1 of 5
Select the unordered list with the class contact-info and set the font size to 0.9em. Then, remove all margin, padding, and list styling.

My answer is this:

.contact-info ul {
    font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}

And it's telling me that

Bummer: Be sure to set the font size to 0.9em.

I feel like my code is right, no? Am I missing something somewhere?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Liam Hayes nope, not quite. Not for step 1. It's the selector that's off. The challenge asks you to select the unordered list with the class "contact-info". Instead, you're selecting all unordered lists inside any other element with the class "contact-info".

For instance, your selector would target this:

<div class="contact-info">
  <ul></ul>
</div>

This is an unordered list inside a div with that class. But you are meant to select this:

<ul class="contact-info"></ul>

This is an unordered list that has that class itself.

So you will need to change your selector from:

.contact-info ul {}

To this:

ul.contact-info {}

Hope this helps! :sparkles:

Liam Hayes
seal-mask
.a{fill-rule:evenodd;}techdegree
Liam Hayes
Full Stack JavaScript Techdegree Student 13,116 Points
Liam Hayes
.a{fill-rule:evenodd;}techdegree
Liam Hayes
Full Stack JavaScript Techdegree Student 13,116 Points

Jennifer, I just want to say thank you so much :)

I was losing it with that challenge a bit haha.

Thank you again. Everything worked. I marked your answer as best answer

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Liam Hayes You're quite welcome! I see that you're in the JavaScript Techdegree. Don't forget to join us on the slack team there. You're not forced to speak if you don't want to, of course, but there is a wealth of knowledge in that place and people who love to help. We don't bite :smiley: