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 trialLivvy Reece
1,649 PointsInside the media query, clear the left side of every 4th item in the gallery
please help!
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) {
}
@media screen and (min-width: 480px) {
#gallery li {width: 28.3333%;}
}
#gallery li:nth-child(4n) {
clear: left;
}
}
3 Answers
Sanjay Tailor
8,443 PointsFor this challenge try following:
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%
}
}
Justin Kraft
26,327 PointsHello Livvy,
Check your curly braces. If you eliminate the one curly brace under the first #gallery id selector it should fix this problem.
mikes02
Courses Plus Student 16,968 PointsYou have duplicate calls to the same media query and your nth-child pseudo class is not within the media query at all, let's look at how that can be addressed:
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
}
You are actually on the right track, you just need to make sure that you keep a close eye on your closing brackets, especially in media queries, since you are nesting CSS within them. Give that a try and it should solve your problem.
Livvy Reece
1,649 PointsLivvy Reece
1,649 PointsI am not understanding what i did wrong