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 trialDaniel Pelaez
2,757 PointsHow to Make a Website: Clear a left float within a media query
the challenge is: inside the media query, clear the left side of every 4th list item in the gallery.
my answer is:
@media secreen and (min-width:480px) {
#gallery li {
width:28.3333%;
}
#gallery li: nth-child (4n) {
clear: left;
}
i can not see what am i doing wrong. can anybody help me?
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
mikes02
Courses Plus Student 16,968 PointsJesus and Nolan,
Thank you both for answering, it's greatly appreciated. However, rather than just posting the answer it would be far more beneficial to the original poster, and other members who may have the same question, if you could please explain why your answer works. Also, both of your answers are actually incorrect, you would not remove the 'n' if you want to target every 4th element, you would in fact leave the 'n' if that were the case, if you had just 4 by itself it would only target the 4th element alone. I believe the spacing between the semi-colon, pseudo class and value is actually what is causing the code to fail, the correct answer would be:
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
}
Daniel - On your original post I modified it a bit to fix the code formatting and also modify the title to be more descriptive and helpful to other forum members.
huckleberry
14,636 PointsThank you both for answering, it's greatly appreciated. However, rather than just posting the answer it would be far more beneficial to the original poster, and other members who may have the same question, if you could please explain why you answer works.
I love you.
mikes02
Courses Plus Student 16,968 PointsThank you Huckleberry, I love you too :)
Daniel Pelaez
2,757 PointsThanks Mikes02 great explanation!!!
Jesus Mendoza
23,289 PointsJesus Mendoza
23,289 PointsRemove the n from 4n!