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! While you're at it, check out some resources Treehouse students have shared here.

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

CSS

Posted by johnathanfigueroa2
johnathanfigueroa2
5,417 Points

Building Responsive Website, Implementing Media Queries, Code Challenge 3/3

Hey all,

I am stuck on this code challenge, a little more explanation during the video would have been nice, but I know I am missing something simple.

Instructions say "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."

so far I have incorrectly written:

  /* Mobile ----------- */
       @media screen and (max-width : 480px) {
         .contact{
          width: 100%; 
         }

  .menu{
    width: 100%;
  }
  #cupcake {
    display: none; 
  }
}

and I believe we are interested in this section where div class = cupcake:

<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>

6 Answers

Sanj Khanal
Sanj Khanal
4,798 Points
Sanj Khanal
Sanj Khanal
4,798 Points

The class selector is defined with a "."

Try replacing --

#cupcake {
  display: none; 
}

--with--

.cupcake img {
  display: none; 
}

// I have made some changes after going through the question. It is quite simple. The question was asking you to hide image elements inside the div with a class ".cupcake".

johnathanfigueroa2
johnathanfigueroa2
5,417 Points
johnathanfigueroa2
johnathanfigueroa2
5,417 Points

@Sanj Khanal

Hey Sanj, thanks for the tip, unfortunately it didn't seem to work for me.

John Locke
John Locke
9,450 Points
John Locke
John Locke
9,450 Points

Try .cupcake { visibility: hidden; }

There is a difference between this and {display: none}, but give it a shot.

Michael Nguyen
Michael Nguyen
3,332 Points
Michael Nguyen
Michael Nguyen
3,332 Points

im stuck on the same code challenge.i've tried visibility and display and none of them seem to work.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Michael - Post the code you have so far in a new thread.

Ken Crawford
Ken Crawford
756 Points
Ken Crawford
Ken Crawford
756 Points

I had the same problem but this code from above post from Sanj worked for me

.cupcake img { display: none; }