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 Responsive Web Design and Testing Refactor the Layout

Douglas Walker
Douglas Walker
2,608 Points
Posted by Douglas Walker
Douglas Walker
2,608 Points

stuck on ntd-child for 4th list item in gallery task

here is my code:

#gallery li:ntd-child(3n+1) { clear: left; }

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 {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

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

@media screen and (min-width: 480px) {
  #gallery li {
    width: 28.3333%;
  }

  #gallery li:ntd-child(3n+1) {
    clear: left;
  }
}

4 Answers

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Hi Douglas you have an issue in your syntax - the term is nth with a (h) not ntd with a (d) as below:

/* This is incorrect
#gallery li:ntd-child(3n+1) { clear: left; }
*/

#gallery li:nth-child(3n+1) { clear: left; }

Hope this helps.

Per Karlsson
Per Karlsson
12,683 Points
Per Karlsson
Per Karlsson
12,683 Points

There's a typo in nth-child. You've spelled it ntd-child :) Hope this helps!

Douglas Walker
Douglas Walker
2,608 Points
Douglas Walker
Douglas Walker
2,608 Points

Still coming up with error for the objective...

@media screen and (min-width: 480px) {

#gallery li { width: 28.3333%; }

#gallery li:nth-child(3n+1) { clear: left; } }

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

This is because to pass the challenge you need to use the pseudo nth-child selector with the value (4n) rather than the (3n+1) - its an error in the challenge and it rectified with the (3n+1) in the teachers notes for the course.

Douglas Walker
Douglas Walker
2,608 Points
Douglas Walker
Douglas Walker
2,608 Points

Great! Thanks Sam and Per, it was because of 3n+1 not being 4n. Challenge error as you said. Have a good day!