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 trialJamie Robertson
3,627 PointsI can not clear the left side of every 4th item
What have I done 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) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4) {
clear:left;
}
1 Answer
Chris Shaw
26,676 PointsHi Jamie,
The value 4
by itself will only select the first element in the fourth position within the #gallery
wrapper, in order to select every fourth element we need to use an nth expression which we do by using one-to-two numbers and the letter n, in this case we only need to use one number.
So the expression we want is 4n
as that will tell the browser we require every nth
child to the power of 4
which will result in the first three elements being skipped, the fourth being selected, the next three skipped and so on.
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear:left;
}
}
Also you appear to be missing a close brace from your selector, make sure everything has an opening and closing brace or the browser will ignore that one section of CSS entirely. On another note, if you ever find yourself stuck I recommend you have some fun with the below link, it allows you to test all kinds of expressions in real-time without the need to write any CSS.
https://css-tricks.com/examples/nth-child-tester/
Happy coding!