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
Pierre Fatal
3,727 PointsInside the media query, clear the left side of every 4th list item in the gallery.
Help. How is this not correct?
#gallery li: nth-child(4th) { clear: left; }
13 Answers
Pierre Fatal
3,727 PointsIf you have this problem:
- check the spacing of all characters
- make sure to use (4n) not (4th) #gallery li:nth-child(4n) {clear: left;}
sergio verdeza
Courses Plus Student 10,765 PointsThis is the way the answer should look, thanks to every one for your help.
@media screen and (min-width: 480px) { #gallery li{ width: 28.333%;} #gallery li:nth-child(4n) {clear: left;}
}
Adam Duffield
30,494 Pointswell thanks for teach me its 4n and not 4! :)
Adam Duffield
30,494 PointsTry 4 not 4th, or maybe that space inbetween li: and nth may have something to do with it. Make sure that "Gallery" is definetly an ID too and not a class. :) Hopefully one of these should cover it.
Pierre Fatal
3,727 PointsThanks Adam!
Adam Duffield
30,494 PointsDid that actually sort it for you? Wasn't feeling too confident in my answer I'm not the best with nth child elements myself!
Pierre Fatal
3,727 PointsYeah it did! Your answer lead me to focus on spacing issues and 4 not 4th.
Aaron Uyehara
15,131 Pointsgallery li:nth-child(4n) {clear: left;}
Aaron Uyehara
15,131 Pointsthere should be a # tag before the gallery. it didn't show up sorry . #gallery li:nth-child(4n) {clear: left;}
lina Hernandez
4,583 PointsHere the correct answer or at least this work for me ! :)
#gallery li:nth-child(4n) { clear: left;
Martin Scott
1,755 PointsWhat worked for me is
gallery li:nth-child(4n) {clear: left;}
I THOUGHT that I had attempted this already. I see other people had posted this in the forum. I was answering this question at the end of my day, my frustration and fatigue levels were high.
MUZ140208 Japhet Vureya
9,073 Pointsgallery li:nth-child(4n) {clear: left;}
MUZ140208 Japhet Vureya
9,073 Points@media screen and (min-width: 480px) {
gallery li:nth-child(4n) {clear: left;} this worked for me
aleks shineleva
8,466 PointsIt still doesn't work for me. I've ran into similar issues before, where it has to be refreshed multiple times before it actually accepts my answer.
@media screen and (min-width: 480px) { #gallery li { width: 28.3333%; }
#gallery li: nth-child(4n) { clear: left; }
}
rachaelallison
9,521 Pointsthis isn't working for me...any ideas why?
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
#gallery li:nth-child(4n) {
clear: left;
}
}
}
Matthew Bingham
11,927 PointsHi Rachel, I haven't done this course but your syntax looks a little incorrect, should it be?:
@media screen and (min-width: 480px) {
#gallery li { width: 28.3333%;}
#gallery li:nth-child(4n) { clear: left; }
}
}
Looks like you missed a bracket?
Matthew Bingham
11,927 PointsMatthew Bingham
11,927 PointsYou forgot the # ;)
#gallery li:nth-child(4n) {clear: left;}