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

Tara Eriksen
Tara Eriksen
2,116 Points
Posted by Tara Eriksen
Tara Eriksen
2,116 Points

Hi - I'm getting stuck on the challenge to clear the left side of every 4th list item.

This is my code:

#gallery li { width: 28.3333% }

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

3 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Tara,

I copy / pasted your code into that challenge and it worked for me. Are you placing that code inside the media query?

Tara Eriksen
Tara Eriksen
2,116 Points
Tara Eriksen
Tara Eriksen
2,116 Points

Hi Robert,

I think I am... This is what I have on the page. Just tried it again, and still not working for me.

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

#gallery li { width: 28.3333% }

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

}

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

As Holt suggested, the problem may be elsewhere in the code. For reference, here is the css/main.css code I'm using that works. Note: this is what it should look like after the 2nd step, when adding nth-child.

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; }
}
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

What is the error you're receiving?

Tara Eriksen
Tara Eriksen
2,116 Points
Tara Eriksen
Tara Eriksen
2,116 Points

Here's the code error: Did you set "clear: left" on every fourth gallery list item?

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Try copying my code and pasting it in for your challenge - remove nth-child line until step 2.

Tara Eriksen
Tara Eriksen
2,116 Points
Tara Eriksen
Tara Eriksen
2,116 Points

Hi Robert,

Thanks - I got it! I was putting a period in between #gallery li.nth-child instead of a colon.

Thanks for you help!

Holt Hunter
Holt Hunter
4,629 Points
Holt Hunter
Holt Hunter
4,629 Points

Make sure that you have assigned the id "gallery" to your gallery ul and the you have your id names correct in your css. If you got all of that right and it still doesn't work, then it may be a problem somewhere in your main.css file.

Tara Eriksen
Tara Eriksen
2,116 Points
Tara Eriksen
Tara Eriksen
2,116 Points

Hi Holt,

I'm having the problem in the challenge inside of the lesson. In my own Workspace files, everything is working fine. Just this challenge, it doesn't want to recognize it. This is what I have so far, in entirety. (I don't know how to keep it formatted correctly in these comments, sorry.)

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

}

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Tara,

In your original question you have li:nth-child(4n) with a colon which is correct but in your followup postings you have li.nth-child(4n) with a period.

Make sure in the challenge that you're using a colon and that it's in the media query at the end of all the other css.