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 trialsecilinam
1,273 Pointswhat am i doing wrong?
Now, clear the left side of every 4th list item in the element with the id of "gallery". Here's a hint: You'll need to write another selector inside of the media query at the bottom of the file, in addition to the one you wrote in the previous step. You'll also need to use the nth-child pseudo selector.
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.33%;
}
#gallery li: nth-child(4n) {
clear:left;}
5 Answers
Jonathan Grieve
Treehouse Moderator 91,253 PointsIt looks like you haven't closed out your media query.
@media screen and (min-width: 480px) {
#gallery li{
width:28.33%;
}
#gallery li: nth-child(4n) {
clear:left;
}
}
Add the final square bracket to the media query you should be good to go. :-)
Jason Anders
Treehouse Moderator 145,860 PointsHi Secil,
Aside from the missing closing brace, your code is correct, except you have a whitespace error that will give you a Bummer!
In your selector, there cannot be a space after the : (#gallery li:nth-child(4n)
)
Fix that and you're good to go. Keep Coding! :)
Shahzaib Awan
13,767 PointsYou should use this hope its will work :)
gallery li:nth-child(4n) {
clear:left; }
Vinny Christiani
2,264 PointsThis actually worked. I have tried everything else and nothing worked except what you just said. I'm not sure what the difference is between
gallery li:nth-child(4n) {
clear:left; }
and
#gallery li: nth-child(4n) { clear:left; }
}
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi Vinny,
What's happening is you're adding a different kind of selector called a pseudo class which attaches to a normal selector. nth-child is a specific type of pseudo class. If you put a space between the selector and the pseudo class selector i.e. the colon (:) then the browser doesn't know that you're trying to use one. It needs to be all one selector value. :-)
secilinam
1,273 PointsThank you very much
Javier Toledo
812 PointsThank you I was crazy about it and the only thing I'd to do was to eliminate the spaces in between #gallery li:nth-child(4n) { /* this line after and before (:) */ clear:left; }
}