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

HTML How to Make a Website Adding Pages to a Website Add and Style Icons

Posted by Nivesh Sharma
Nivesh Sharma
Courses Plus Student 1,941 Points

Urgent help needed for the code challenge. unordered list font-size error

I have selected the unordered list element under the contact-info class properly and applied the font-size property to it. workspace showing error.

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

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

2 Answers

Martin Zarate
Martin Zarate
10,723 Points

Try selecting the tag followed by the class name:

ul.contact-info { ... )

Cheers.

Nivesh Sharma
Nivesh Sharma
Courses Plus Student 1,941 Points

Martin, Thanks it worked!. But if you could tell me why the earlier solution didn't worked, though it was fine. That would be great.

Martin Zarate
Martin Zarate
10,723 Points

In CSS the order of operations matters. If you type a class name followed by a tag, ex: ( .my-class ul ) this will search for an element with that class name first, then it will search for a 'ul' element inside that class, in your case there wasn't any because the element you want has the class name in it, not as a child of it. The solution: ( ul.class-name ) tells the CSS processor to search for a 'ul' element first, then says find me the one with a class of '.class-name'. I hope this helps, cheers.

Nivesh Sharma
PLUS
Nivesh Sharma
Courses Plus Student 1,941 Points
Nivesh Sharma
Nivesh Sharma
Courses Plus Student 1,941 Points

You explained it so clearly. Thanks Martin.!!