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

sean farrelly
sean farrelly
1,614 Points
Posted by sean farrelly
sean farrelly
1,614 Points

now clear the left side of every 4th list item in element with the ID of gallary. Here's a hint: you'll need to write

now clear the left side of every 4th list item in element with the ID of gallary. Here's a hint: you'll need to write another selector inside of the media query at bottom of the file, in addition to the one you wrote in the previous step. you'll also need to used the nth-child pseudo selector.

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 {
    max-width: 28.3333%;
  }

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

  }
  }

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there sean farrelly! You're doing really well. Your code is off by a total of one space. Now, some things in CSS are not that picky about white space. This time it's make or break. Take a look at the altered line:

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

  #gallery li:nth-child(4n) {  /*remove the space between the li and the colon */
    clear: left;

  }
  }

Keep going! :sparkles:

cossy
cossy
17,748 Points
cossy
cossy
17,748 Points

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

#gallery li:nth-child(4n) { /*remove the space between the li and the colon */ clear: left;

} }

sean farrelly
sean farrelly
1,614 Points
sean farrelly
sean farrelly
1,614 Points

The answer is as follows

gallery li:nth-child(4n) {

clear: left; } }