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

Eric Angel
Eric Angel
10,816 Points

How to hide an image using a media query

Add the appropriate CSS within the same media query that will force the “love at first bite” illustration to disappear.

Ok what am I doing wrong?

/*small resolution breakpoint*/
@media screen and (max-width:705px) {
.grid_1 { width: 100%; } 
.grid_2 { width: 100%; }
.grid_3 { width: 100%; } 
.grid_4 { width: 100%; } 
.grid_5 { width: 100%; } 
.grid_6 { width: 100%; }  
}
}
#intro img{
  display:none;
}

3 Answers

Eric Angel
Eric Angel
10,816 Points

Thanks, the paste left some stuff out--but you showed me the light all the same:

/*small resolution breakpoint*/ 
@media screen and (max-width:705px) 
{ 
.grid_1,  
.grid_2, 
.grid_3,  
.grid_4,
.grid_5,
.grid_6 { width: 100%; }

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

Indenting your code inside of media query helps a lot to make things readable, which in turn helps to understand what the code is doing and helps to spot mistakes.

Kevin Korte
Kevin Korte
28,148 Points

It appears to me you do not have the img selector inside of the media query. Those double brackets are closing it off. Also, your missing the period or the hashtag in front of the intro, depending on whether that is an id or a class.

Kevin Korte
Kevin Korte
28,148 Points

Awesome, good job man. That looks like that should pass.