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 trialJonathan Shay
1,984 PointsHow do I clear the left side of every 4th list item in the element with the id of "gallery"? I have tried everything.
I have tried everything. What is wrong?
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%;
}
@media screen and (min-width: 480px) {
#gallery li :nth-child (4n)
clear: left;
}
2 Answers
Martin Balon
43,651 PointsHi Jonathan,
you were close, but you need to specify offset too - :nth-child(an+b) - the b is the offset. Also, you forgot to wrap clear:left in curly braces and you didn't have to write new media query. Here's the code that passes the challenge:
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n + 0) {
clear: left;
}
}
Fraser Edwards
6,307 PointsYour answer is nearly correct, but you've missed some brackets after your selector and to close off your media query, and also included some spaces where there shouldn't be any.
You can include both rules inside one media query, and it should look like this:
@media screen and (min-width: 480px) { #gallery li { width: 28.3333%; }
#gallery li:nth-child(4n) { clear: left; }
}
Don't forget that you need to use brackets for both your media query and the rules within it.