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

HTML

Posted by Frank Browne
Frank Browne
Courses Plus Student 834 Points

Answer to quiz ? #2 Code Challenge: Implementing Media Queries

I am having a problem with question #2 in the Code Challenge: Implementing Media Queries. This is under the section - Build a Responsive Website - Adaptive Design - Implementing Media Queries. I believe I need some help since I have tried to answer for about 3 hours now it is clearly not that difficult.

The question is:

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 Code Provided:

<!DOCTYPE html> <html> <head> <link href="//fonts.googleapis.com/css?family=Nunito:400,300,700" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no"> <style> body { background-color: #420600; color: #FAF3BC; font-family: 'Nunito', sans-serif; font-size: 1em; font-weight: 100; } img { width: 100%; 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 : 480px) {
}

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

6 Answers

Jordan Warnholtz
Jordan Warnholtz
3,705 Points
Jordan Warnholtz
Jordan Warnholtz
3,705 Points

You need to add your contact and menu identifiers to your media query CSS and allow them to span the width of the queried space, which in this case is 480px

Frank Browne
PLUS
Frank Browne
Courses Plus Student 834 Points
Frank Browne
Frank Browne
Courses Plus Student 834 Points

Can you show me what you mean by writing the line of code

Jordan Warnholtz
Jordan Warnholtz
3,705 Points
Jordan Warnholtz
Jordan Warnholtz
3,705 Points 
@media screen and (max-width : 480px) {
    .contact {
        width:100%;
    }
    .menu {
        width:100%;
    }
}
Frank Browne
PLUS
Frank Browne
Courses Plus Student 834 Points
Frank Browne
Frank Browne
Courses Plus Student 834 Points

thanks Jordan. It worked. I guess I was overthinking it and writing too much code and getting too cute.

Jordan Warnholtz
Jordan Warnholtz
3,705 Points
Jordan Warnholtz
Jordan Warnholtz
3,705 Points

No worries. Sometimes you just need to step away, take a break and come back to see where things went wrong.

Frank Browne
PLUS
Frank Browne
Courses Plus Student 834 Points
Frank Browne
Frank Browne
Courses Plus Student 834 Points

I agree