sorry all i have the px wrong...here is the query

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

Your code from each task should be added to the code written in the previous task.

@media screen and (max-width : 705px) {

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width:100%; }

this is the syntax i was using

intro-img {

display: none;

}

I dont understand should this be within the second bracket after setting responsive flow for gid 1 through 6?

Hi Robert,

Make sure that you first specify intro as an ID selector followed by the img selector. Hint: Hyphen isn't necessary.

Hi Guil

Thanks for your response

Im doing stage for of the Smells Like Bakin' tutorial and this is the code i have got in but its not right

@media screen and (max-width : 705px) {

intro-img{display:none;}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width:100%;}

or would it be

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

then

intro-img{display:none;}

excellent it was the second form thank so much for the hyphen tip thanks a million :-)

You're welcome, Robert. Good job!

Would either Guil, or Robert as kind enough to look over this code:

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

}

and could you please explain what "Make sure that you first specify intro as an ID selector followed by the img selector. Hint: Hyphen isn't necessary." means?

I believe I did that by doing

.intro img{
display: none;
}

@Jonathan -

Remember, in CSS prefix an id selector with a #.

Here's an example:

html <div id="awesome"></div>

css #awesome { /* css */ }

You can read more about using IDs on Shay Howe's Beginner's Guide to HTML & CSS

If you are still confused check out the CSS Foundations course here on Treehouse.

for Johnathon

when i did it this is how i wrote the code

<pre> @media screen and (max-width: 705px){

intro img{

display: none; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } .

</pre>

let me now how you get on with it as thats what i did to send command about the image when making responsive for break point on the media for 705px

for some reason it didnt transfer the #intro img{ display:none;} then the grids within the {}