CSS CSS Selectors Advanced Selectors :nth Pseudo-Class Challenge

Alexandra Velez
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points

Floating isn't applying

The images aren't floating left. The rows aren't forming in sets of 3.

Not sure why it's not responding

style.css
/* Write the CSS in the media query below */

@media (min-width: 607px) {
    img {
      float: left;
    }

   img:nth-child (3n + 4) {
       clear:left;
  }

}
index.html
<!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>

2 Answers

Nikko Rey Hular
Nikko Rey Hular
12,191 Points

Can you try to declare a specific width in your img.

Aaron Mordeno
seal-mask
.a{fill-rule:evenodd;}techdegree
Aaron Mordeno
Front End Web Development Techdegree Student 6,821 Points

I noticed here that there is a space between the ":nth-child" and the parentheses.

So instead of this: img:nth-child (3n + 4)

It should work like this: img:nth-child(3n + 4)

Hope that helps!