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

Posted by Jack Kenyon
Jack Kenyon
3,344 Points

Clear the Fourth Item nth child help?

I need to clear the fourth item, on the left side, and my code seems to be wrong although I'm not sure why.

Here's what I'm typing in:

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

Any help?

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Edited your post to add correct MarkDown to embed code in the forum. If you now click edit you can see how this is done :)

4 Answers

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

You missed of the '#' in front of gallery and have some un-needed spaces in your selector. Also the code needs to be within the media query. See the code below

@media screen and (min-width: 480px) {
  #gallery li {
    width: 28.3333%;
  }
  #gallery li:nth-child(4) {
    clear: left;
  }
}
Jack Kenyon
Jack Kenyon
3,344 Points
Jack Kenyon
Jack Kenyon
3,344 Points

Amazing thank you,

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Your welcome man!!

Dominik Sikiric
Dominik Sikiric
2,059 Points
Dominik Sikiric
Dominik Sikiric
2,059 Points

strange but It doesn't work for me. Probably is something stupid (although I copy-pasted it) but still doesn't work

Dominik Sikiric
Dominik Sikiric
2,059 Points
Dominik Sikiric
Dominik Sikiric
2,059 Points

[SOLVED] maybe it is not same exercise but I am referring on responsive web design stage 8, and I found what was missing. You don't have character n behind number 4. Basicaly that means this rule would be applied only on 4th item and this exercise asks to apply rule to every 4th item, so 4th, 8th,12th...that "n" help us to do so... so correct code is

gallery li:nth-child(4n) {

clear: left;

}

Rogan Sweftee
Rogan Sweftee
Courses Plus Student 1,230 Points

Ohh Yeah!!

I have the same problem and find out for almost 20min. I miss "n" after (4n) too

Thank you Dominik Sikiric : )