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

Posted by Darrin Rich
Darrin Rich
3,119 Points

Responsive Design Code Challenge

I'm stuck on a code challenge.

Responsive Design -Content Defined Breakpoints challenge Task 2/3.

Task is : Add the appropriate CSS within the same media query that will force the "love at first bite" illustration to disappear.

I tried:

grid_2 omega {display:none;}

but I guess that's not it.

Is it the space between (grid_2 and omega) that is biting me or am I doing something completely wrong here.

Thanks

8 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Looks like there might be a bug in the code correctness test ..

.grid_2.omega img {display: none; } seems to select the avocado image as well

However #intro img { display: none; } should work as it just selects the only img inside the div with the id intro.

Check out this codepen to see what I mean. Also you need to resize you browser window to 700px obviously as it's using a media query.

Michael Tupper
Michael Tupper
14,633 Points
Michael Tupper
Michael Tupper
14,633 Points

This was not a very well executed code challenge. Like most solutions, there are a number of ways to solve it, I tried many, none passed. The one that I tried that did pass, as posted by @darrin, technically is incorrect if sticking strictly to the instructions, which does not say anything about removing all images, as the solution that passes does:

.grid_2 img {display: none;}

but a more correct option does not pass, and actually forces the first exercise to not pass either:

#intro > .grid_2 img {display: none;}
James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Michael -

This was not a very well executed code challenge.

You're right.

There appears to be a bug in the code correctness test for this particular code challenge (as I noted 4 months ago).

ecp
ecp
838 Points
ecp
ecp
838 Points

Hi @Darrin

We received your email and are looking into the problem. Keep an eye out for an email from us :) Thank you.

Luca Yesupatham Daniel
Luca Yesupatham Daniel
8,714 Points
Luca Yesupatham Daniel
Luca Yesupatham Daniel
8,714 Points

Probably missing the dots? And when specifying multiple classes you don't have to separate the classes with spaces.

.grid_2.omega {display:none;}

or

.grid_2.omega img {display:none;} \ I think this is the right solution

Darrin Rich
Darrin Rich
3,119 Points
Darrin Rich
Darrin Rich
3,119 Points

Thanks @Elizabeth for the email follow up. The solution was
.grid_2 img {display:none;}

I didn't think of trying it since the .grid_2 class was used in multiple instances It hides other images as well. Just assumed that would be incorrect. Love at first Bite

Thanks for the help. I can now move on. Yay!

Demetrius Atkins
Demetrius Atkins
2,401 Points
Demetrius Atkins
Demetrius Atkins
2,401 Points

I had trouble with this as well, not because I had the wrong code, but simply because it wouldn't pass. I used a more specific approach to selecting the img specifically with:

intro > .grid_2 img {

display: none; }

and it didn't pass.

Matthew Clark
Matthew Clark
2,928 Points
Matthew Clark
Matthew Clark
2,928 Points

Just a heads up: Even though I was using the right code, I was still not able to complete the task for some reason. So I came to the forums searching and trying different code; even adjusting the HTML.

Eventually what solved the problem was simply to close down the browser [Chrome], and open it back up and try the code that I knew should work.

If you're in Chrome and you notice when you're doing the code challenge that certain code elements aren't changing colors as they usually do, you might be suffering my same problem.