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!

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

Posted October 14, 2013 9:30am by

I can't seem to make an image disappear. "Add the appropriate CSS within the same media query that will force the “love at first bite” illustration to disappear."

what do i do to complete this task "Add the appropriate CSS within the same media query that will force the “love at first bite” illustration to disappear." ? i know i need to add "display: none;" but i don't know what to put in front of it

7 Answers

October 14, 2013 10:53am

Hey Samuel,

add this to the media query and it should work:

.grid_2 img {
     display: none;
}

You should have started from there! I didnt know you where doing a code challenge!

let me know if it worked, it did for me!

cheers

October 14, 2013 11:01am

thank you so much!!!! <3 <3 <3 <3

October 14, 2013 9:37am

Hi Samuel,

Reference the image using a class, for example:

<img src="the-name-of-your-image.jpg" class="hide-mobile" alt="some text" />

Then call the class:

.hide-mobile{
   display: none;
}

I am not quite sure if this is what you are looking for but I hope it helps,

Cheers, Iban

October 14, 2013 9:49am

hi iban!

what do you mean by reference the image. i think thats where im having trouble. im not sure what to put before the display part

October 14, 2013 9:56am

Hi Samuel,

In order to make changes the image, you need to call it on the stylesheet. You can achieve that by giving a class to the image, for example:

As you can see in the code above, I gave the image a class name something (class="something"). Then later in the code whenever I want to apply styles to that specific image I can reference it using the given class, for example:

This could be a line in your style.css file

.something { 
     display: none; 
 }

We reference classes in the stylesheet by putting a dot before its name. Therefore class="something" will be referenced in the stylesheet as .something { display: none; }

I hope it makes it a bit clearer,

cheers

October 14, 2013 10:13am

hey mate, the first time i saw your reply the image didnt show up, thats why i was confused. ive tried that but it doesnt seem to want to work. i changed the class you "love-at-first-bite" and then typed in on the css file ".love-at-first-bite { display: none;}

October 14, 2013 9:59am

Uups Sorry the example didn't get printed out :

<img class="something" src="path-to-img.jpg" alt="some text" />

October 14, 2013 10:16am

Hey mate,

copy and paste the stylesheet, include the media query statement as well,

;)

October 14, 2013 10:23am

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

the html, that they've given me, without what you wanted me to put in

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> <link href="//fonts.googleapis.com/css?family=Nunito:400,300,700" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div id="intro"> <div class="grid_4"> <h1>We're kicking taste buds in to high gear with our featured avocado chocolate cupcake from the west to the east coast.</h1> </div> <div class="grid_2 omega"> <img src="img/love-at-first-bite.gif" alt="Love at First Bite"> </div> </div>

        <div id="featured-cupcakes" class="grid_12">
            <div class="grid_2">
                <h2>Bacon Me Crazy</h2>
                <img src="img/bacon-medium.jpg" alt="Bacon Me Crazy" class="cupcake">
            </div>
            <div class="grid_2">
                <h2>Jalapeno So Spicy</h2>
                <img src="img/lime-medium.jpg" alt="Jalapeno So Spicy" class="cupcake">
            </div>
            <div class="grid_2 omega">
                <h2>Avocado Chocolate</h2>
                <img src="img/avocado-medium.jpg" alt="Avocado Chocolate" class="cupcake">
            </div>
        </div>
</div>

</body>

</html>

and the css

body { font-family: 'Nunito', sans-serif; font-weight: 100; font-size: 1.25em; color: #faf3bc; background-color: #420600; }

.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% / .grid_2 { width: 32.5%; } / 260px/800px = 32.5% / .grid_3 { width: 49.375%; } / 395px/800px = 49.375% / .grid_4 { width: 65.625%; } / 525px/800px = 65.625% / .grid_5 { width: 83.125%; } / 665px/800px = 83.125% / .grid_6 { width: 100%; } / 800px/800px = 100% */

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { margin-right: 1.25%; float: left; display: block; } .alpha { margin-left:0; } .omega {margin-right:0; }

.container{ width: 90%; max-width: 800px; padding: 4% 0; margin: auto; } img { max-width: 100%; } h1 { font-size: 1.750em; line-height: 1.25em; font-weight: 100; letter-spacing: -2.75px; }

h2 { font-weight: 100; font-size: 1.15em; color: #b4c34f; } .cupcake { box-sizing: border-box; background-color: #faf3bc; padding: 8px; margin: 0 0 5% 0; }

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

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

October 14, 2013 10:24am

        <div id="featured-cupcakes" class="grid_12">
            <div class="grid_2">
                <h2>Bacon Me Crazy</h2>
                <img src="img/bacon-medium.jpg" alt="Bacon Me Crazy" class="cupcake">
            </div>
            <div class="grid_2">
                <h2>Jalapeno So Spicy</h2>
                <img src="img/lime-medium.jpg" alt="Jalapeno So Spicy" class="cupcake">
            </div>
            <div class="grid_2 omega">
                <h2>Avocado Chocolate</h2>
                <img src="img/avocado-medium.jpg" alt="Avocado Chocolate" class="cupcake">
            </div>
        </div>
</div>

</body>

</html>

October 14, 2013 10:25am

body { font-family: 'Nunito', sans-serif; font-weight: 100; font-size: 1.25em; color: #faf3bc; background-color: #420600; }

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { margin-right: 1.25%; float: left; display: block; } .alpha { margin-left:0; } .omega {margin-right:0; }

.container{ width: 90%; max-width: 800px; padding: 4% 0; margin: auto; } img { max-width: 100%; } h1 { font-size: 1.750em; line-height: 1.25em; font-weight: 100; letter-spacing: -2.75px; }

h2 { font-weight: 100; font-size: 1.15em; color: #b4c34f; } .cupcake { box-sizing: border-box; background-color: #faf3bc; padding: 8px; margin: 0 0 5% 0; }

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

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

October 14, 2013 10:30am

Do you want to hide all images, right?

You can then use the class cupcake (class="cupcake") and call it on the media query.

Place this code in the media query

.cupcake {
    display: none;
}

try this out, see if it works

October 14, 2013 10:34am

i want to just hide the 'love at first bite' illustration

does that change anything?

October 14, 2013 10:39am

yeah, then you have to add a class to that image:

<img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush" class="hide">

Then on your css:

.hide { 
    display: none; 
}

Try this, it should work

October 14, 2013 10:44am

its not working :/ i dont know what im doing wrong

is there any chance you could try it and let me know how you did it?

its under; websites build a responsive website responsive design Code Challenge: Content Defined Breakpoints

October 14, 2013 11:02am

not a problem! good luck!

October 14, 2013 11:29am

hey iban!

for the code challenge after the one you went through with me, what do i do for the second part to it. i dont know what i should do differently ?

November 5, 2013 2:57pm

Ha ha, i got stuck on this too, i was using an advanced selector img[alt*="love at first bite"] then using display: none etc. the code worked in the example but not accepted as a correct answer, however using the selector grid_2 img {} does.

December 10, 2013 11:13pm

Chris that helped me a lot. Thanks!

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Samuel Scurville

Samuel Scurville

I can't seem to make an image disappear. "Add the appropriate CSS within the same media query that will force the “love at first bite” illustration to disappear."

7 Answers

Iban Dominguez

Iban Dominguez

Samuel Scurville

Samuel Scurville

Iban Dominguez

Iban Dominguez

Samuel Scurville

Samuel Scurville

Iban Dominguez

Iban Dominguez

Samuel Scurville

Samuel Scurville

Iban Dominguez

Iban Dominguez

Iban Dominguez

Iban Dominguez

Samuel Scurville

Samuel Scurville

Samuel Scurville

Samuel Scurville

Samuel Scurville

Samuel Scurville

Iban Dominguez

Iban Dominguez

Samuel Scurville

Samuel Scurville

Iban Dominguez

Iban Dominguez

Samuel Scurville

Samuel Scurville

Iban Dominguez

Iban Dominguez

Samuel Scurville

Samuel Scurville

Chris MacDonald

Chris MacDonald

Katrina Jones

Katrina Jones