Adaptive Design Challenge 4

Let's break down the question: Add the appropriate CSS code to the media query so that images within the ".cupcake" div disappear when the device or browser width is at most 480px wide.

The keyword is "images within the .cupcake div". What we must write in our media query is this:

.cupcake img { display: none; }

In the above code, we are first referring to the class "cupcake". If we write "img" next to it, then we are referring to the selectors within class cupcake.

By the way, how do you get that code box in your message?

To add on to this discussion. I have been having a some difficulty with the implementing Media Queries task as well.

I have been re-watching the video over and over and I can't seem to figure out the second task .

"Add the appropriate CSS code to the media query so that ".contact" and ".menu" fill the entire container width when the device or browser width is at most 480px wide"

The last thing ive done was add this to the media query with no luck

/* Mobile ----------- */

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

  .contact .menu{

    width:100%;

  }

This is also based on the previous video... Any guidance will be greatly appreciated. Ive been working on this for a few days :(

I have to complain about this - the video and the code challenge do not sync. Spent hours stumped on this and I bet there are far more people who haven't commented. Thanks to the questions above, this was answered, but it's totally not intuitive based on the video. Feel bad for all the other folks who continue to meet this same dilemma.

Hi Vanessa,

It's a little strange, and a bit counter-intuitive because they just showed you a video of how to add items within the media query. But this is how you do it:

Near the top of your code/page is the following:

img { margin: 2% 0; }

You must do the following within that segment of code:

img { margin: 2% 0; width: 100%; }

@Amanda - Your confusion on this challenge may be related to your skipping over the CSS Foundations course.

To view the order in which these were designed to be taken, look at the Learn HTML & CSS Learning Adventure

Thank you so much! Hopefully I'll be able to pass through the next few questions :)

Sorry but could I ask for help in one more part of the task? I'm stuck on the third question unfortunately, which is;

Add the appropriate CSS code to the media query so that images within the ".cupcake" div disappear when the device or browser width is at most 480px wide.

I tried putting this under the media queries tag, but I still get the red bar of doom.

   .cupcake {
    display: none;
  border-bottom: 1px dotted #FAF3BC;
  padding: 5% 0;

I'm unsure of whether there should be a "img" included in there somewhere, or whether it's my placement of the "display: none;" that is wrong.

I'm not looking at the code currently, but the way you've written the code says that "menu" is a class within the "contacts" class. Within the media query, try setting the width for each class separately.

Paul,

I really appreciate you taking the time for the response. It worked perfectly . I love the feeling of seeing that green bar across the result bar!

Thanks again.

You're a life saver Paul!

About the box, I just copied the code from the challenge, and they somehow ended up with a code box when published.

Thanks once again~

the joy I have that these questions and answers were here is second to none! I was stuck on that one for hours! this is the first challenge i've had any sort of trouble with - totally didn't make sense based on the content provided. blah.

Well now I feel silly for being so stumped over this quiz lol.

Thanks Paul!

hmm