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 trial
Brittney Coble
16,474 PointsI do not understand how to get past this nth child code challenge.
Question: We want three floated images per row. In the media query, create a pseudo-class selector that targets the fourth img child element first, then every third img that follows. Then, add a clear property that clears the left float.
What am I missing? Thanks.
/* Write the CSS in the media query below */
@media (min-width: 607px) {
img:nth-child(3n+4) {
float: left;
clear: left;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="thumb-forest.jpg" alt="">
<img src="thumb-resort.jpg" alt="">
<img src="thumb-trees.jpg" alt="">
<img src="thumb-falls.jpg" alt="">
<img src="thumb-view.jpg" alt="">
<img src="thumb-sunset.jpg" alt="">
<img src="thumb-lake.jpg" alt="">
<img src="thumb-beach.jpg" alt="">
<img src="thumb-bay.jpg" alt="">
<img src="thumb-peaks.jpg" alt="">
<img src="thumb-falls.jpg" alt="">
<img src="thumb-resort.jpg" alt="">
</body>
</html>
4 Answers
Graeme Oxley
8,931 PointsHey Brittney. I went back and did the exercise myself to understand exactly what you were wanting to do and here is what did pass for me.
@media (min-width: 607px) {
img {
float:left;
}
img:nth-child(3n+4) {
clear:left;
}
}
The important thing to notice here, and this is important in all CSS, is the understanding of what should and shouldn't be grouped. In this example we are saying to ourselves "I want all of the images to float to the left, but I only want the 4th image and then every 3rd image after that to clear it's left float."
Your code says "I only want the 4th image and then every 3rd image after that to float to the left and also to clear it's left float." leaving the rest of the images with no float and no clear.
Something weird that I discovered about this challenge also is that the "preview" appears (on my screen at least) to be capped at 606px width; however the code itself only comes into effect at 607px, so it will never actually preview the code change. Changing "min-width" to "max-width" will fix that and show you the three images side-by-side.
Martha Brown
4,380 PointsHi Brittney,
This is a puzzling challenge. I did it a few months back and I think I had problems with it then; I tried it again today and it passed even though I grouped 'clear:left' wrong after float left!
Graeme must be a pro because when I changed the min to max and replicated Graeme's code it all worked--border and alignment--3 in a row--so that I could view and understand the result the way it should be.
Like Graeme indicated, it could be the size of the screen (I am working on a 24" screen)~. Happy coding!
Brittney Coble
16,474 PointsThank you! Graeme's code worked for me. And it makes sense now but was hard to figure out when initially reading the question.
Martha Brown
4,380 PointsThat is great and I was also glad to see Graeme's code; it helped clarify this challenge for me too.
Best regards