Implementing Media Queries (Responsive Websites Section)

Hey Steven,

Sorry to hear that you are stuck but we can try and figure it out. Could you post a link to the code challenge you are having trouble with along with the specific task number and we can try and help you out.

Hey Dan, Thanks for the response.

Here's the link for the code challenge: http://teamtreehouse.com/library/websites/build-a-responsive-website/adaptive-design/implementing-media-queries-2

Having trouble with the first task at the moment.

Thank you.

Hi Steven,

The first task is asking you to adjust the css so the images scale with the fluid layout. As you can see in the mockup on the right, the image of the cupcakes looks out-of-place because it stretches outside its containing div (see how the rest of the Cupcake Menu is only two-thirds of the screen and the image stretches about three-quarters of the screen).

To fix this, you need to adjust the img selector so that the image is never more than 100% of its containing div. You can do this by adding one line of code that controls the size of the img.

Hope this helps,

JL

Hi J L,

Thanks for the help. I understand what needs to be done to complete the task, However I am unsure of what additional code I need to add to affect the image.

Any additional help would be greatly appreciated!

Thanks!

Hey Steven,

The code you are looking for kinda goes like this.

In the CSS at the top of the code you will see the img tag. Inside of that tag is where the code is going to go that will affect that image. This is what you need to add to make the image span 100% of the width, which is what makes it responsive.

img{width: 100%;}

Hope this helps. Good Luck

Dan

I'm struggling with the same series of questions - mainly the last one on making the image disappear. What is the command for that? Thank you!

Hey Susan G I would be happy to assist you with that. You will need to make the image disappear by including CSS code in the media query part of the CSS file. The property you are looking for is the "display" property.

Thanks Dan! On the same topic - how do you refer to a specific image? For example, what would the appropriate tag be for the following? I've tried .intro img and .intro-img but neither seems to work.

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

You would refer to the specific image with ".intro img" and then the declaration.

How come sometimes it's .intro img and sometimes it's #intro img? Is that particular to the code challenges or is there a rule about that?

Hey Susan, That is a great question. The hash symbol "#" is for selecting ID's and the period symbol "." is for selecting classes.