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

Why is my CSS not passing in the code challenge even though it's correct?

I was asked to select the unordered list with the class contact-info and to set the font size to 0.9em. then some other stuff...

I have written the CSS correctly as far as I can tell and I get a "bummer – set your font size to 0.9em!"

.contact-list ul {
      font-size: 0.9em;
}

I have no idea why not – if this is a bug it's killing me!

Also one slightly unrelated question (and I'm a newbie so apologies in advance) but treehouse peeps told me to include a screenshot in my post here and I can't see how I can?

7 Answers

Steven Parker
Steven Parker
231,261 Points

Your font-size setting is correct. But the problem is with your selector. You said you were asked to "select the unordered list with the class contact-info", but the selector you used (.contact-list ul) is for an unordered list that is a descendant of some element with the class contact-info.

:point_right: A selector for an unordered list with the class contact-info would be ul.contact-list (no spaces).

You don't need a screenshot. But links to the problem are nice. Usually, if you use the "get help" button inside the course it will provide the links for you. I didn't need the links this time because you did a great job of repeating the challenge requirement and sharing your answer (nicely blockquoted! :+1:).

Hi Steven, thanks for your speedy response, I tried your example but no luck, still the same Bummer message

Steven Parker
Steven Parker
231,261 Points

There's still that "other stuff" to the challenge you didn't mention.

Nicolas Fernandez
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicolas Fernandez
Full Stack JavaScript Techdegree Student 17,565 Points

Next time send the HTML aswel please. I think the unordered list have the class contact-list, so you are calling twice the same thing.

try this:

.contact-list {
      font-size: 0.9em;
}

This didn't work! Thanks anyway but no luck

And I can't send the HTML – it was a code challenge :)

Nicolas Fernandez
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicolas Fernandez
Full Stack JavaScript Techdegree Student 17,565 Points

its working.. but you didnt make all what what is asking for. 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.

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

Hi Nicolas – I did exactly this!!! I am trying every single variation to try to isolate the issue. And still, even if I add all this I get the message "Bummer, you need to set your font size to 0.9em). If I could attach a screenshot I would.

Nicolas Fernandez
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicolas Fernandez
Full Stack JavaScript Techdegree Student 17,565 Points

Try coping the whole document haha lets see:

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;
}

http://prntscr.com/a7ahwt

OMG! hahahaha it just worked. I have no explanation. I think if one gets angry enough computers know and just work. Thanks for persisting :)

Steven Parker
Steven Parker
231,261 Points

:warning: SPOILER ALERT

Okay, I found the challenge, here's the link.

For task 1, this DOES pass:

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

It will also pass if you leave off the ul, but it really shouldn't, since that's not what it's asking for.

Nicolas Fernandez
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicolas Fernandez
Full Stack JavaScript Techdegree Student 17,565 Points

The problem was she had something wrong with the other styles, try to delete the close of the previous style (profile-photo), it give you the same error what she says: Bummer Be sure to set the font size to 0.9em. Thats why I gave her the whole css file

Steven Parker
Steven Parker
231,261 Points

I only saw the excerpt. This is where that "get help" button inside the challenge would have been very helpful.