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
Dave Fowler
Courses Plus Student 3,640 PointsMedia Query - Hide the image.
I'm currently working this challenge: "Add the appropriate CSS within the same media query that will force the “love at first bite” illustration to disappear."
I've set my media query at the designated 705px, and passed the first part of the stage.
Currently, I have my CSS as:
intro img {
display: none;
}
When I refresh the preview, the image I'm supposed to remove is gone, but I still can't pass the stage.
Any ideas??
Thanks in advance!
12 Answers
Dave Fowler
Courses Plus Student 3,640 PointsFigured it out!!
I had a misplaced "}" to end my media query!
Sorry!!
James Barnett
39,199 Points@Dave - A large part of liking coding is enjoying spending several hours hunting for a misplaced bracket or semicolon. In most cases the majority of time spent coding is actually spent debugging issues like this.
Dillon Omane
2,739 PointsThe method you guys were talking about before did not work for me at all. when I use
.grid_2 img { display: none }
it removes all the images from the page. when I use
.intro img { display: none }
It dose nothing at all.
When I use
.omega img { display: none } it works but it also removes the last picture of avocado chocolate.
Ian Warner
5,563 PointsHey Dillon,
I had the same problem but this works now:
@media screen and (max-width: 705px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
width: 100%;
}
.grid_2 img {
display: none;
}
James Barnett
39,199 Points@Dave - Work on this your bad self 
Dave Fowler
Courses Plus Student 3,640 Points@James - Thank you, it is a great feeling figuring something out, even if it is just a curly bracket lol.
Dave Fowler
Courses Plus Student 3,640 Points@James - Very true! A big help is having a notebook and pen handy while watching the videos!
James Barnett
39,199 Points@Dave - Notetaking is a great help when learning to code.
Pen & paper, notepad, workflowy, scribble wiki, simple note, those are all great solutions.
Craig London
4,883 PointsI'm a bit stuck on this as well... if I move the #intro img to the top (above .grid_1), the check says it fails step 1.
If I move it to the bottom, it doesn't work.
@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
39,199 PointsCraig - It looks like you've got 2 separate CSS rules and no semi-colons.
Craig London
4,883 PointsThanks James, the computer does exactly what you tell it to do! I had been stuck on that challenge for a few days!
Nicholas Blomquist
1,877 Pointsthis is what I did and it works just fine: (just make sure to put it at the bottom of the page)
@media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } .grid_2 img {
display: none; } }
Harleigh Abel
4,547 PointsIm still wondering how the above solution removes the illustration and not the rest of the images from grid 2. Craig was closest. Not sure why but this one stumped me for a bit.