Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Build a Responsive Website Creating a Fluid Foundation Converting Pixels to Percentages

I need help with this plz

There is already a forum for this buts its old and confusing

<!DOCTYPE html>
<html>
  <head>
    <style>

      /* When setting flexible margin on an element, your context is the width of the element's container.
      When setting flexible padding on an element, your context is the width of the element itself. */

      p {
        margin: 0;
      }
      body {
        color: #fff;
      }
      .container {
        max-width: 500px;
      }

      .icing {
        background-color: #B4C34F;
        width:  0.015625.; /*500px*/
      }
      .cake {
        background-color: #f8748f;
        width: 80%; /*400px*/
      }
       .filling {
            background-color: #4FB69F;
            width: 83.33333333%; /*500px*/ 
    margin: 1.6666666666%;
    padding: 10px;
        }

    </style>
  </head>
  <body>
    <div class="container" id="container">
    <div class="icing">
      <p>Icing</p>
      <div class="cake">
        <p>Cake</p>
        <div class="filling">
          <p>Filling</p>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

oh yeah here is where im stuck 3 out of 3

.filling { background-color: #4FB69F; width: 83.33333333%; /500px/ margin: 1.6666666666%; padding: 10px; }

5 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher

Sean;

Let's break this entire challenge down, shall we?

Task 1

Using .container as your context, convert the width of .icing from pixels to percentages.

  1. In the style the width of .container is 500px. For this task, that is our starting point.
  2. The icing class is 500px as well.
  3. To convert this to percentages we take the value for .icing and divide it by the value for .container and convert it to a percentage. So, 500px / 500px = 1 x 100 = 100%

Task 2

Using .icing as your context, convert the width of .cake from pixels to percentages (using the comments as a guide).

  1. Again, in the comments for .icing we are at 500px.
  2. The width of .cake is 400px.
  3. To covert to percentage we take .cake divided by .icing and convert that number to a percentage. So, 400px / 500px = .8 x 100 = 80%.

Task 3

Using .cake as your context, convert the width of .filling from pixels to percentages (using the comments as a guide).

  1. We use the comments for the value of .cake now, which is 400px.
  2. The width of .filling is 300px.
  3. Covert to percent: 300 px / 400 px = .75 x 100 = 75%

I hope that explanation helps.

Happy coding,

Ken

Hi Sean,

I don't know if you changed the comments but when I try the challenge the comment for .filling says it's 300px. Also, you have a margin and padding assigned to it that wasn't in the challenge.

Your context is .cake which had a width of 400px and your target is .filling which had a width of 300px.

So you'll want to divide 300px by 400px.

I would also get rid of the margin and padding in case it throws off the challenge checker.

Also, you should have had width: 100%; for .icing to pass task 1. I'm not sure how you got passed it without that.

Andy Bradbury
PLUS
Andy Bradbury
Courses Plus Student 4,697 Points

Your percentage is wrong - you're close!

Remember this is a child of .cake. I won't give you the direct answer but you're very close. Check it out in inspector in Chrome.

Thanks for all the great tips you guys are so much help!