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

Holly Holliday
Holly Holliday
1,563 Points
Posted by Holly Holliday
Holly Holliday
1,563 Points

I can't get this-"Inside the media query, clear the left side of every 4th list item in the gallery."

I thought it should go in the #gallery li { but it doesn't work. not sure what to do.

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) {

}

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

3 Answers

Christopher Aporta
Christopher Aporta
24,258 Points

Hi Holly!

So using the following...

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

will actually target every fourth list item in the gallery (4n) starting with the second list item. In order to tag every fourth item, you can simply write the following...

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

In practice, my code above is the same as using "li:nth-child(4n + 4)", but I know for certain the code above will pass the code challenge. Also, be mindful of the whitespace you have between "nth-child" and the parentheses, as the whitespace will most likely invalidate the code.

This CSS-Tricks article really helped me out when i was learning :nth-child(), and NTH-TEST and :nth Tester are also good resources, although the latter can be a bit buggy at times

Hope this helped! Happy coding!

Holly Holliday
Holly Holliday
1,563 Points
Holly Holliday
Holly Holliday
1,563 Points

Now it's asking me " Inside the media query, clear the left side of every 4th list item in the gallery.

I put this---li:nth-child(4n+4) { clear: left and (min-width: 480px); } }

What am I missing now???

Christopher Aporta
Christopher Aporta
24,258 Points

Holly,

As I noted above, the following code, verbatim, will pass this part of the challenge:

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

Your selector above, li:nth-child(4n+4) is technically correct in this circumstance (albeit redundant, which may be why it doesn't pass the challenge), but even so, the statement as a whole is invalid (your inclusion of min-width in the declaration is incorrect, and as such, I'd suggest reading into the topic of Media Queries).

Hopefully you also get some time to review the resources i sent you regarding the usage of :nth-child().

Best of luck!

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

You want to use the nth-child selector to target every 4th list item and then use the clear property to make sure those elements start all the way to the left. It will look something like this:

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

In this example, we target every third element (3n), starting with the third element in the list (+2).

Holly Holliday
Holly Holliday
1,563 Points
Holly Holliday
Holly Holliday
1,563 Points

thank you! When I apply this

gallery li:nth-child (4n+2) {

clear:left;

it doesn't work. what I really don't understand is why is this a challenge question when we never went over it....

Christopher Aporta
Christopher Aporta
24,258 Points

Hey Jeff! So you're example here will actually target every third list item in the gallery (3n) starting with the second list item (+2), not the third. This was probably just a typo, but I've posted some resources in my answer below for reference.

Happy coding!

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Thanks for clearing that up Christopher.

Holly, nth-child was covered in a previous video, although only briefly. Nth-child can be a bit tough to get a hang of, what they want from you for this challenge is:

#gallery li:nth-child(4n)

This will target every 4th element. If we look at the value of 'n', which starts at 0, we are targeting 4x0=0 (no element), 4x1=1 (fourth element), 4x2=8 (eighth element), and so on.

Take a look at this article for a great explanation of nth-child: https://css-tricks.com/how-nth-child-works/