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.

Question

Can some one give me the answer for the 3rd Task with a explanation on how they did it

Answer 1 · 2013-06-13T15:05:50Z

June 13, 2013 3:05pm

I wont give you the answer, but I'll give you the parts so you can put it together. Break it down:

Media query:

 @media (min/max-width: ###px) { CSS code here }

in this case, you want to hide images up to 480px, so it'll be max-width. Than it says images in the cupcake div. So.

.cupcake img { Specific CSS code here }

And then hide the images so, the specific CSS is

display: none;

And those are the three parts. Look at this site if you need help putting it together. http://css-tricks.com/css-media-queries/

Answer 2 · 2013-06-13T17:17:11Z

June 13, 2013 5:17pm

Rilwan,

In Step 3 of 3 in the code challenge Build A Responsive Website > Adaptive Design > Implementing Media Queries, the "mobile" section is already there in the CSS, where you added the code for the previous step.

In step 3 the goal is to hide any and all images within the .cupcake div when the browser is re-sized to 480px wide or smaller. Which means you want to add the appropriate CSS to the media query so that no images will display at 480px or less.

Hint: judging from the code you pasted in your comment it looks like you know what to add, but you didn't place it in the media query.

Answer 3 · 2013-06-13T19:35:21Z

June 13, 2013 7:35pm

rilwan shinaba -

It looks like you are having trouble the media query syntax. I suggest you check out the HTML Dog tutorial on media queries and then try to write your media query and the CSS you need to affect the img. Then paste that code (and just those lines of code) here on the forum and we will see if we can pinpoint where your issue is.

Answer 4 · 2014-04-02T23:37:00Z

April 2, 2014 11:37pm

Quick question - I got stuck here as well. When I used:

.cupcake {display:none;}

It didn't work, while using

.cupcake img {display:none;}

does work. Why is this? Wouldn't selecting the entire .cupcake div include the images within the div?

Answer 5 · 2013-06-13T15:22:46Z

June 13, 2013 3:22pm

am very confused on it so confused i lost my concentration, which is the reason why i said i need answer with explanation.

<!DOCTYPE html>
<html>
<head>
  <link href="//fonts.googleapis.com/css?family=Nunito:400,300,700" rel="stylesheet" type="text/css">
  <style>
    body {
      background-color: #420600;
      color: #FAF3BC;
      font-family: 'Nunito', sans-serif;
      font-size: 1em;
      font-weight: 100;
    }
    img {
      margin: 2% 0; max-width:100%; 
    }
    h1 {
      font-weight: 100;
      font-size: 2.25em;
      margin: 5% 0;
    }
    h2 {
      font-weight: 100;
      font-size: 1.500em;
      color: #B4C34F;
    }
    h3 {
      font-weight: 100;
      font-size: 1.25em;
      color: #4FB69F;
    }
    h2, h3 {
      margin: 0;
      padding: 0;
    }
    p {
      margin: 5% 0;
    }
    strong {
      font-weight: 300;
      color: #B22316;
    }
    div {
      box-sizing:border-box;
      -moz-box-sizing:border-box; /* Firefox */
      -webkit-box-sizing:border-box; /* Safari */
    }
    #container {
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
    }
    .menu {
      width: 60%;
      margin: 0 0 2% 0;
      float: left;
    }

    ul.prices {
      font-size: .75em;
      list-style: none;
      padding: 2% 0;
      margin: 0;
    }
    .prices li {
      float: left;
      width: 33.3333333%;
    }

    .cupcake {
      border-bottom: 1px dotted #FAF3BC;
      padding: 5% 0;
    }
    .cupcake img {
    display: none;
}
    }
    .cupcake:nth-child(2) {
      border-top: 1px dotted #FAF3BC;
    }
    .contact {
      width: 35%;
      margin: 5% 0;
      padding: 3%;
      float: right;
      background-color: #2e0400;
      border-radius: 15px;

    }
    .contact span {
      color: #B22316;
      font-weight: 600;
    }

    /* Mobile ----------- */
      @media (max-width : 480px) }

   .cupcake img {display: none; }
   .contact {width:100%;}

  </style>
</head>
<body>
  <div id="container">
    <div class="menu">
      <h1>Cupcake Menu</h1>
      <div class="cupcake">
        <h2>Bacon Me Crazy</h2>
        <p>Our infamous Bacon Cupcake has a deliciously moist vanilla cake, creamy cream cheese icing, topped with bacon and maple glaze.</p>
        <img src="images/cupcake.jpg" alt="Smells Like Bakin">
          <ul class="prices">
            <li>1 Cupcake: <strong>$3</strong></li>
            <li>1/2 Dozen: <strong>$12</strong></li>
            <li>1 Dozen: <strong>$19</strong></li>
          </ul>
      </div>

      <div class="cupcake">
        <h2>Jalepeno So Spicy</h2>
        <p>This spicy cupcake has a chocolatey cake with a kick, creamy vanilla lime icing, and topped with a lime wedge.</p>
          <ul class="prices">
            <li>1 Cupcake: <strong>$4</strong></li>
            <li>1/2 Dozen: <strong>$18</strong></li>
            <li>1 Dozen: <strong>$24</strong></li>
          </ul>
      </div>

      <div class="cupcake">
        <h2>Avocado Chocolate</h2>
        <p>Made with chocolate cake, avocado icing, and topped with walnuts, this cupcake will kick your tastebuds into fiesta mode! </p>
          <ul class="prices">
            <li>1 Cupcake: <strong>$4</strong></li>
            <li>1/2 Dozen: <strong>$18</strong></li>
            <li>1 Dozen: <strong>$24</strong></li>
          </ul>
      </div>
    </div>

    <div class="contact">
      <h3>Custom Orders</h3>
      <p>We are always willing to create new flavors! For custom orders and catering options, please contact Smells Like Bakin'</p>
      <p>Call us: <span>1-800-CUPCAKE</span></p>
    </div>

  </div>
</body>
</html>

Answer 6 · 2013-06-13T19:29:32Z

June 13, 2013 7:29pm

Matthew is correct. Your cupcake class selector is not inside the media query.

Answer 7 · 2014-04-03T15:28:45Z

April 3, 2014 3:28pm

.cupcake {display: none; } .cupcake ul {display: none; } .cupcake img {display: none; }

Welcome to the Treehouse Community

Looking to learn something new?

rilwan shinaba

rilwan shinaba

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.

James Barnett

James Barnett

James Barnett

James Barnett

7 Answers

Kevin Korte

Kevin Korte

Kevin Korte

Kevin Korte

Matthew Dilello

Matthew Dilello

James Barnett

James Barnett

Thomas Honeyman

Thomas Honeyman

Matthew Dilello

Matthew Dilello

rilwan shinaba

rilwan shinaba

Kevin Korte

Kevin Korte

Yang Bo

Yang Bo