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 trialTara Eriksen
2,116 PointsHi - 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
Courses Plus Student 16,352 PointsHi Tara,
I copy / pasted your code into that challenge and it worked for me. Are you placing that code inside the media query?
Holt Hunter
4,629 PointsMake 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
2,116 PointsHi 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
Courses Plus Student 94,610 PointsHi 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.
Tara Eriksen
2,116 PointsTara Eriksen
2,116 PointsHi 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
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsAs 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.
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsWhat is the error you're receiving?
Tara Eriksen
2,116 PointsTara Eriksen
2,116 PointsHere's the code error: Did you set "clear: left" on every fourth gallery list item?
Robert Richey
Courses Plus Student 16,352 PointsRobert Richey
Courses Plus Student 16,352 PointsTry copying my code and pasting it in for your challenge - remove nth-child line until step 2.
Tara Eriksen
2,116 PointsTara Eriksen
2,116 PointsHi Robert,
Thanks - I got it! I was putting a period in between #gallery li.nth-child instead of a colon.
Thanks for you help!