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 trialPrince Mutimbanyoka
753 Pointshelp
Inside the media query, clear the left side of every 4th list item in the gallery.
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;
}
1 Answer
Marcus Parsons
15,719 PointsHey Prince,
You are very close with your code! ":nth-child" should be directly beside "li" and then right beside of that should be (4n) in parenthesis like so:
@media screen and (min-width: 480px) {
#gallery li{
width:28.3333%;
}
#gallery li:nth-child(4n){
clear:left;
}
}
Andy V
19,406 PointsAndy V
19,406 PointsThanks! I deleted my post so as not to be confusing. But I appreciate the heads up :)
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsNo problem, Andy. Honestly, I really hate doing that to someone's code, and I wish there was a direct message feature on here, because I would have privately sent you a message about it. I feel like sometimes it comes off as someone being called out publicly for a mistake, you know? Thanks for being understanding! :)