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

CSS CSS Selectors Advanced Selectors :nth Pseudo-Class Challenge

Gareth Partridge
Gareth Partridge
13,421 Points
Posted by Gareth Partridge
Gareth Partridge
13,421 Points

Inside the media query, create a new rule that targets img elements. Then, float the images left.

I am not sure how to target img inside the media query, I have tried various ways.

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

.img-@media (min-width: 607px) {
  float: 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>

4 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

You don't want to modify the media query itself, the new rule should go inside it. And to target something by tag name, use only the name (no symbols) as a selector:

@media (min-width: 607px) {  /* don't change this part */
  img {                      /* new rule goes INSIDE */
    float: left;
  }
}
Ty Mckenzie
Ty Mckenzie
3,465 Points
Ty Mckenzie
Ty Mckenzie
3,465 Points

This was my answer but when I check work it says 'Bummer: Are you floating the images left?'

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

(I cleared the answer and started over and it worked. Drives me nuts when this happens cuz I second guess myself thinking I don't know what I'm doing when I know what I'm doing.)

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Even experts can make typo's now and then, and they can be difficult to spot. A typo was usually the cause if you start over and get it right by doing the "same thing".

Alana Warson
Alana Warson
5,296 Points
Alana Warson
Alana Warson
5,296 Points

I'm working on the second part of the challenge that says to use the clear method to clear the left float. Can anyone help me out please.

Didier Pham
Didier Pham
7,175 Points
Didier Pham
Didier Pham
7,175 Points

is it just me or did we not learn anything about float in nft pseudo classes...?

Charles Sok
seal-mask
.a{fill-rule:evenodd;}techdegree
Charles Sok
Front End Web Development Techdegree Student 7,860 Points
Charles Sok
.a{fill-rule:evenodd;}techdegree
Charles Sok
Front End Web Development Techdegree Student 7,860 Points

I don't remember seeing this and I triple checked my notes which I copy from the transcripts. I had to look this up just to find the answer. I don't think this is the first time I've seen this problem before.

Kayla Howard
Kayla Howard
4,655 Points
Kayla Howard
Kayla Howard
4,655 Points

Why does this not work for this question?

img[src*="thumb-"] { float: left; }

or

img[src*=".jpg"] { float: left; }