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!

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 Tony McCabe
Tony McCabe
8,445 Points

Converting Pixels to Percentages

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

 .cake {
        background-color: #f8748f;
        width: 0.015625%;

Having a little difficulty with this code

5 Answers

Alex Murphy
Alex Murphy
8,622 Points

First figure out the pixel width of both icing and cake classes.

The formula you need to use is Target / Context = Result

Or in this case .cake / .icing = Result

Make sure you move the decimal point to the right two spaces.

Let me know if that helps.

lloan alas
lloan alas
17,774 Points
lloan alas
lloan alas
17,774 Points

Or multiply by 100 :D

Susy Vilchez
Susy Vilchez
780 Points
Susy Vilchez
Susy Vilchez
780 Points

I have the same problem and its not working HELP!

Devin Gray
Devin Gray
39,261 Points
Devin Gray
Devin Gray
39,261 Points

I am having the same problem, but I think there is a glitch in the answer. The only difference is that I'm trying to change .filling from pixels to percentages. I'm positive that my answer is right, but for some reason it keeps telling me that it is incorrect, and it is troubling me. Here is the code:

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

  .icing {
    background-color: #B4C34F;
    width: 100%; /*500px*/
  }
  .cake {
    background-color: #f8748f;
    width: 80%; /*400px*/
  }
  .filling {
    background-color: #4FB69F;
    width: 60%; /*300px*/
  }
Steve Rowton
Steve Rowton
Courses Plus Student 1,702 Points

@DevinGray, not sure if you managed to solve your issue but I was having the same problem for ages and as I couldn't find an answer thought I would post one. The trick is to read the question thouroughly as you have to use '.cake' as the context for your calculation, as opposed to continuing to use the '.container'. Therefore 300px / 400px = 0.75 or 75%.

Your section of code should read as follows:

.filling { background-color: #4FB69F; width: 75%x; /300px/ }

Devin Gray
Devin Gray
39,261 Points
Devin Gray
Devin Gray
39,261 Points

Yeah I did end up solving that problem on my own, about 5 minutes after I posted this I realized that I was taking the percentage from the wrong container, I just didn't see how to delete my comment. But thanks for replying Steve, It's good to know this forum is so proactive and helpful. :)

lloan alas
lloan alas
17,774 Points
lloan alas
lloan alas
17,774 Points

Would you mind posting the rest of the code?

Remember to divide.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

What's the width of the container element where the image is to go? Divide the width of the image by the width of the containing element and then times it by 100. So, a 500px image in a 1000px container would be 500/1000=0.5 x 100 = 50%.

And you haven't closed your CSS curly bracket, but that could just be mistype here.

branco design
branco design
5,120 Points
branco design
branco design
5,120 Points

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

.icing { background-color: #B4C34F; width: 100%; /500px/ } .cake { background-color: #f8748f; width: 80%; /400px/ } .filling { background-color: #4FB69F; width: 60%; /300px/ }