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 trialAllie Merkley
1,619 PointsI cannot get past this question please help
I don't know what I am doing 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) {
}
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
}
#gallery li: nth-child(4n) {
clear:left;
}
}
1 Answer
Michael Collins
3,447 PointsHi Allie,
You have the correct answers in your code, but you have some formatting errors. At the bottom of your CSS file you have:
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
}
#gallery li: nth-child(4n) {
clear:left;
}
}
You have duplicated the media query so you have two for the 480px breakpoint. Then your bottom block of CSS isn't within the media query and after that you have an extra closing bracket. You also have a space between li and :nth-child which can be removed.
So you have the correct CSS for the task, but it just needs to be reformatted like below:
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear:left;
}
}
I hope that helps.
Michael Collins
3,447 PointsMichael Collins
3,447 PointsThe task does actually allow both answers
However, the question asks for every fourth list item to be selected.
#gallery li:nth-child(4n)
Does this and selects the 4th, 8th, 12th etc.
However with the below
#gallery li:nth-child(3n+1)
Although it does select the fourth element, it doesn't select every fourth element.
It will select the 4th, 7th, 10th, 13th etc. So it is technically wrong.