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 How to Make a Website Adding Pages to a Website Add and Style Icons

Chris Gains
Chris Gains
2,888 Points
Posted by Chris Gains
Chris Gains
2,888 Points

Select the unordered list with the class contact-info and set the font size to 0.9em. Remove all margin, padding, list S

Cant see where Im going wrong?

My tip keeps on saying to 'make sure to set the font size to 0.9em', but I have?

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 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 ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-size: 0.9em;
}
Michael Lauridsen
Michael Lauridsen
10,321 Points
Michael Lauridsen
Michael Lauridsen
10,321 Points

Hello Chris, I think it's because the challenge is checking for the font-size in the beginning of the brackets

This one passed for me:

.contact-info {
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}
Chris Gains
Chris Gains
2,888 Points
Chris Gains
Chris Gains
2,888 Points

Hi Michael, I did that first with no luck. Just tried again to be sure, but the same problem?

Michael Lauridsen
Michael Lauridsen
10,321 Points
Michael Lauridsen
Michael Lauridsen
10,321 Points

Seems like it works without anything but .contact-info {//}. So .contact-info ul {//} won't pass. Can't really tell you why without looking at the html.

Chris Gains
Chris Gains
2,888 Points
Chris Gains
Chris Gains
2,888 Points

Just found this https://teamtreehouse.com/forum/add-and-style-icons-challenge-1-of-5

I added ul.contact-info and it worked. It also seems to work without the 'ul' to. Thanks Michael :)

Michael Lauridsen
Michael Lauridsen
10,321 Points
Michael Lauridsen
Michael Lauridsen
10,321 Points

Ah got it! The devil lies in the detail. It says "Select the unordered list with the class contact-info", so it is an unordered list with a class, and not an ul list, nested inside a class.

2 Answers

Joao Pedro Portela G. Vaz
Joao Pedro Portela G. Vaz
4,507 Points
Joao Pedro Portela G. Vaz
Joao Pedro Portela G. Vaz
4,507 Points

To refer a class of an element, use

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

You should first use the element, and the class afterwards.

The difference between ul.contact-info and just .contact-info is simple: If you put the contact-info class on a div and you use .contact-info on your CSS file, the div is going to use that style too. If you use ul.contact-info and try to add the contact-info class on a div, it's not going to work.

Joshua Harman
Joshua Harman
8,821 Points
Joshua Harman
Joshua Harman
8,821 Points

Actually guys, your issue is actually that you selected too much. When it asked that you select the unordered list with the class contact-info, it didn't need you to select *.contact-info ul{}* . There actually is no such thing, since the very the thing the class is connected to is the unordered list in question.

<ul class="contact-info">

It needed you to just select the .contact-info class since you didn't need to be redundant. Does that make sense?

Here's what it should look like:

either

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

or this works too, (for this particular challenge), I would just be more inclined to use the former in case I have multiple ul(s) in a document.

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

I hope this helps!!

Joao Pedro Portela G. Vaz
Joao Pedro Portela G. Vaz
4,507 Points
Joao Pedro Portela G. Vaz
Joao Pedro Portela G. Vaz
4,507 Points

Yeah, you are right, but I prefer keeping the ul.contact-info in case another element has the class .contact-info.