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 davidcasanellas
davidcasanellas
1,099 Points

Media Queries challenge not working

Hi! I am working on the Implementing Media Queries Challenge and I am experiencing problems with the Code Engine Challenge. When I check the work this message appears:

Bummer! The image isn't scaling with the browser. How could you set the width of the image so that it's fluid?

The task is: "Add the appropriate CSS code to the CSS to make images scale with the fluid layout."

And I put this piece of code:

       img {
        width: 90%;
        margin: 5% 5%;
       }

When the browser detects the screen is 975px, the image reescales, but the code engine doesn't check it:

This is my entire code. Help would be great!

The CSS

body {
  background-color: #420600;
        color: #FAF3BC;
        font-family: 'Nunito', sans-serif;
        font-size: 1em;
    font-weight: 100;
  }
img {
  margin: 2% 0;
}
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 p {
  margin: 0;
}
.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 screen and (max-width : 975px) {
  img {
    width: 90%;
    margin: 5% 5%;
  }
  #container h1 {
    text-align: center;
  }
  .menu {
    width: 100%;
  }
  .contact {
    width: 100%;
  }
}

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

The HTML

  <!DOCTYPE html>
  <html>
  <head>
    <link href="//fonts.googleapis.com/css?family=Nunito:400,300,700" rel="stylesheet" type="text/css">

</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="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>

Thanks,

David

5 Answers

samiff
samiff
31,206 Points
samiff
samiff
31,206 Points

They're looking for something more like:

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

Margin on top and bottom wouldn't really factor into responsive scaling, so you don't need to change it here. Max-width allows the image to scale to the containing block's width, in this case, 100% of it.

Jake Craige
Jake Craige
4,913 Points
Jake Craige
Jake Craige
4,913 Points

a little note. 

margin: 5% 5%;

is the same thing as 

margin: 5%;
davidcasanellas
davidcasanellas
1,099 Points
davidcasanellas
davidcasanellas
1,099 Points

/* ==== EDITED ==== */

Wow, I changed max-width onto min-width in the declaration of the media query and it worked, but I don't understand why.

  @media screen and (min-width : 480px) {
      .menu {
      width:100%;
   }
   img {
      margin: 2% 0;
      max-width: 100%
   }
}

Thanks.

/* ====/EDITED==== */

Thanks guys. I followed your instructions but the code does not pass.

I used this code:

 @media screen and (max-width : 480px) {
     .menu {
        width:100%;
     }
     img {
        margin: 2% 0;
        max-width: 100%
     }
}

Thank you.

samiff
samiff
31,206 Points
samiff
samiff
31,206 Points

The max-width rule should go inside of the existing img rule towards the top, and not the media query. You'll use the media query section during the next steps though.

Edit: That is to say that you want the max-width rule to apply to all media types & widths.

davidcasanellas
davidcasanellas
1,099 Points
davidcasanellas
davidcasanellas
1,099 Points

Ouch! Thanks Sam!