Floating isn't applying

Question

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>

Answer 1 · 2020-04-18T06:43:01Z

April 18, 2020 6:43am

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

Answer 2 · 2020-05-28T22:04:26Z

May 28, 2020 10:04pm

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!

Welcome to the Treehouse Community

Looking to learn something new?

Alexandra Velez

Alexandra Velez

Floating isn't applying

2 Answers

Nikko Rey Hular

Nikko Rey Hular

Aaron Mordeno

Aaron Mordeno