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 trialJoel Lithgow
7,414 PointsThe Test "Responsive Web Design and Testing" my code (which is correct) isn't working.
Can someone tell me what went wrong with this code? (the test asks me to clear every 4th image in the list to left)
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child (3n+1) {
clear: left;
}
}
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 (3n+1) {
clear: left;
}
}
1 Answer
Lin Lu
29,171 PointsHi,
You are right actually. I just noticed that the code in the video is not correct and below the video, in Teacher's Notes section, you can find the code correction.
Code Correction
In this video, the selector :nth-child(4n) is used to correct a responsive issue on every 4th item. In other words, this will select the 4th item, 8th item, 12th item, and so on. This fixes the specific problem in the video, but if more gallery items are added beyond the 5 that are present in this project, the design will start to break again. That's because there are 3 items in each row, and every 4th item could appear at the beginning, middle, or end of a row.
Instead, we want to select the first item in each row. A more robust solution is to use the selector :nth-child(3n + 1) instead. This will select every 3rd item plus 1. In other words, this will select the 4th item, 7th item, 10th item, and so on.
Hope that helps!
Joel Lithgow
7,414 PointsJoel Lithgow
7,414 PointsThanks, but I have put both types of code into the test that follows that lesson, but with still no luck it still claims I am wrong.
Lin Lu
29,171 PointsLin Lu
29,171 PointsThere's a whitespace between the "nth-child" and the opening parenthesis, I think that caused the problem.
Joel Lithgow
7,414 PointsJoel Lithgow
7,414 PointsOk thanks I'll try that out in about 10min and tel you how that works out.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Joel,
You have a space after
nth-child
which should be removed.Also, the instructions say to clear every 4th child so you'll want to go back to what was in the video and use
4n
This will clear every 4th child. The updated code
3n + 1
is correct for the website project but it does not meet the requirements of the challenge for clearing every 4th child.3n + 1
will clear every 3rd child starting with the 1st.Joel Lithgow
7,414 PointsJoel Lithgow
7,414 PointsI have tried both thinking that was the case but I'll get rid of that space and get back to you.