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

Nabeel Alam
Nabeel Alam
11,944 Points
Posted by Nabeel Alam
Nabeel Alam
11,944 Points

code challenge

Im having trouble passing this code challenge, about changing every 4th list item in the gallery.

Thank you

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 : nth-child (4n) {
    clear: left;
  }

}

3 Answers

Treasure Porth
STAFF
Treasure Porth
Treehouse Teacher
Treasure Porth
Treasure Porth
Treehouse Teacher

Try taking out the spaces and getting rid of the n after the 4.

gallery li:nth-child(4) {

clear: left;

}

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

You need to use the nth-of-type pseudo class. If you just put 4 in the () it will only effect the 4th item and no others. If you put 4n, it will do every 4th item. Your media query should look like this: 

@media screen and (min-width: 480px) {
  #gallery li {
    width: 28.3333%
  }
  #gallery li:nth-of-type(4n) {
    clear: left;
  }
}
Nabeel Alam
Nabeel Alam
11,944 Points
Nabeel Alam
Nabeel Alam
11,944 Points

Thank you, it was just the spacing issue!