Hey Kevin,

Glad you were able to work it out :D Thank you for posting your answer so other students can benefit from your solution!

Cheers!

Elizabeth

I struggled as well but here is what I got and it worked...

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

intro img, object {

display: none; } }

Hi Julia,

Sorry that you're having trouble. Would you be able to post a link to your working code, or a screenshot, and a link to the code challenge? Also, I've re-tagged your post so the appropriate Teacher can find it. Be sure to tag your Forum posts with the appropriate topic name (like HTML or code challenge) so Teachers and Students can help you :)

Don't forget - you can always email the Support team at help(at)teamtreehouse(dot)com if you're stuck! Be sure to include a screenshot and a link to the Code Challenge. That'd be super-helpful :)

Cheers!

• E

Hey Julia!

It sounds like you need to target the image specifically inside of that div, rather than all images or just the div itself. So if it has an id of "intro" for example, you'd target images inside of that div by writing your code like:

#intro img {
    display: none;
}

For it to disappear only at 705px, write that code within the media query.

Learn more about selectors here: http://teamtreehouse.com/library/websites/css-foundations/selectors

I can help you more next time if you link to a screenshot of your code and a link to the challenge like Elizabeth pointed out! Hopefully this helped :)

Allison

@Julia -

If you are still having trouble use this code playground to test out your code. Then share the link to your codepen in this thread.

@Kevin -

For the Content Defined Breakpoint ...

You don't need to add a class to the love at first bite illistration. Instead just take a look at the html, and take note of ...

• The image is inside of the intro div.
  
• It's the only image inside of that div.
  

So in order to hide just that illustration and nothing else use ...

#intro img { display: none; }

Don't use `img { display: none; } that will incorrectly hide all of the images.

If you click the refresh preview button in the code challenge and then resize your browser until it's less than 705px wide the illistration will vanish.

The reason for this is that the code challenge's preview function is actually using your own browsers media queries, so it won't actually hide the images until you your viewport size is less than 705px wide.

In the code challenge the .svg file is part of an object in index.html.

So you select the ID then your object "Image/object/etc.." then to command it to display none.

For example

#intro .object { Display: none; } 

I struggled as well but here is what I got and it worked...

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

intro img, object {

display: none; } }

"Swap out the appropriate selector in the media query in the CSS"

When i first read this the key thing to me was "Swap Appropriate Selector" so i thought to swap the 'img' for 'object'

intro, object {

display: none; }

this works as well

intro img, object {

display: none; }

either way works,

You can target a specific image with a class. Add class to your code like this:

<object data="img/your_image_name.svg" type="image/svg+xml" class="xxx">
              <img src="img//your_image_name.gif" alt="yyy">
</object>

Then call this class under Style.css and set the code to display: none. It should be something like this:

.xxx {
     display: none;
}

It worked with me.

#intro object { Display: none; } I found that this worked. Don't forget that the image has turned into an object.

Hi,

I don't know why no code not work

@media  screen and ( max-width = 705px ) {
#intro img, object { display : none ; }
}

Also this code

@media  screen and ( max-width = 705px ) {
#intro object { display : none ; }
}

and this

@media  screen and ( max-width = 705px ) {
#intro img { display : none ; }
}