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

Jonathan Shay
Jonathan Shay
1,946 Points
Posted by Jonathan Shay
Jonathan Shay
1,946 Points

How do I clear the left side of every 4th list item in the element with the id of "gallery"? I have tried everything.

I have tried everything. What is wrong?

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


  @media screen and (min-width: 480px) {
    #gallery li :nth-child (4n)
    clear: left;    
  }

2 Answers

Martin Balon
Martin Balon
43,433 Points
Martin Balon
Martin Balon
43,433 Points

Hi Jonathan,

you were close, but you need to specify offset too - :nth-child(an+b) - the b is the offset. Also, you forgot to wrap clear:left in curly braces and you didn't have to write new media query. Here's the code that passes the challenge:

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Fraser Edwards
Fraser Edwards
6,307 Points
Fraser Edwards
Fraser Edwards
6,307 Points

Your answer is nearly correct, but you've missed some brackets after your selector and to close off your media query, and also included some spaces where there shouldn't be any.

You can include both rules inside one media query, and it should look like this:

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

#gallery li:nth-child(4n) { clear: left; }

}

Don't forget that you need to use brackets for both your media query and the rules within it.