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 trialGareth Partridge
13,421 PointsInside 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.
/* Write the CSS in the media query below */
.img-@media (min-width: 607px) {
float: 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
Steven Parker
231,198 PointsYou 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;
}
}
Alana Warson
5,296 PointsI'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
7,175 Pointsis it just me or did we not learn anything about float in nft pseudo classes...?
Charles Sok
Front End Web Development Techdegree Student 7,860 PointsI 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
4,655 PointsWhy does this not work for this question?
img[src*="thumb-"] { float: left; }
or
img[src*=".jpg"] { float: left; }
Ty Mckenzie
3,465 PointsTy Mckenzie
3,465 PointsThis 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
231,198 PointsSteven Parker
231,198 PointsEven 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".