"Object-Oriented Swift" was retired on May 31, 2020.

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 Richard Walton
Richard Walton
3,639 Points

Answers to Responsive Web Site class

I am trying to take the class "Build a responsive web Site" I can not pass the quizzes for modules Adaptive Design and Responsive Design. Can someone tell me what the answers are?

3 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Richard, if you could copy in the questions you're having problems with and the answers you are trying, then someone can help guide you in the right direction. This should help you learn where you are going wrong rather than just having the correct answers to paste in.

Richard Walton
Richard Walton
3,639 Points
Richard Walton
Richard Walton
3,639 Points

Tom, The question is: Add the appropriate CSS code to the CSS to make images scale with the fluid layout. There is no CSS file to modify in my question only the index file. Following is the code I placed in the index.html file:

    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">

Thanks, Rick

Tom Bedford
Tom Bedford
15,645 Points

Hi Rick, I had a look at the question and there seems to be an embedded style sheet in the head of the index.html page for the challenge.

You do not need to add any links to other stylesheets for this task.

I have added a comments to show where the embedded stylesheet begins/ends and where you need to add the appropriate CSS:

<!DOCTYPE html>
<html>
<head>
  <link href="//fonts.googleapis.com/css?family=Nunito:400,300,700" rel="stylesheet" type="text/css">
  <style> /* start of embedded stylesheet */
    body {
      background-color: #420600;
      color: #FAF3BC;
      font-family: 'Nunito', sans-serif;
      font-size: 1em;
      font-weight: 100;
    }
    img {
      margin: 2% 0;
      /* you need to add the code here */
    }
    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>/* end of embedded stylesheet */
</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>
Richard Walton
Richard Walton
3,639 Points
Richard Walton
Richard Walton
3,639 Points

Thanks for the help Tom. I got pass the first question in the series now. The 3rd questions is no giving me problems. The question 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. My answer is below:

/* Mobile ----------- */ @media screen and (max-width : 480px) { .menu { width: 100%; margin: 0 0 2% 0; float: left; } .contact { width: 100%; margin: 5% 0; padding: 3%; float: right; background-color: #2e0400; border-radius: 15px; }

 .cupcake {
 display: none;
}

 .cupcake p {
  display: none;
}
.cupcake:nth-child(2) {
 display: none;
}

}