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 trialShane Murphy
6,207 Pointswhy isnt my code working with the psuedo selector nth-child(n2)?
im suppose to clear: left and all my code seems correct, im lost.
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
}
}
Shane Murphy
6,207 PointsI have tried it both ways, i initially had it with the semi-colon.
Brent Cralley
18,541 PointsSince it's the last style, I don't think the lack of semi colon will effect the layout, but it's good practice anyway.
I'll see if I can find anything else...
Shane Murphy
6,207 Pointshere is the question for the code challenge:: (https://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/refactor-the-layout)
2 Answers
Fábio Tavares da Costa
11,985 PointsYou typed
li . (single dot) pseudo
It's a regular class from the parser's perspective
Change to
:nth-child(4)
Shane Murphy
6,207 PointsThank you !!! That was it.
Fábio Tavares da Costa
11,985 Pointslook at the lesson again
I'm sure the code used is something like :nth-child(2n+1)
It means :nth-child([interval of]2n+[start at item]1)
would select 1,3,5...
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
Brent Cralley
18,541 PointsBrent Cralley
18,541 PointsLooks like there is no semi colon after "clear: left". :-)