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

Fluid design Code Challenge

So, I'm working on changing the grid from pixels to percentages. If you divide the .container max width of 500px by the .icing pixel width of 500px you get 1. Obviously the wrong answer. What am I doing wrong?

7 Answers

Elliott Frazier
PLUS
Elliott Frazier
Courses Plus Student 9,647 Points

what you need to do is divide the margin of filling not the width.

10 / 640 = (answer)

Chase Lee
Chase Lee
29,275 Points

Could you give a link to your problem.

Im past that (figured it out), however, Im trying to convert the margins to percentages. ex. 840px / 640px = 1.25% simple enough. Now I have 640 px / 480 px which yields 1.33333333333333. What would be the correct percentage for that?

Chase Lee
Chase Lee
29,275 Points

The correct percentage would just be what you've got.

Well, when taking the code challenge, I get it is not the correct answer. Have tried 1.33, 1.333, 1.3333, etc. How many decimal points do you have to put in?

James Barnett
James Barnett
39,199 Points

Using 3 decimal places & rounding up generally works, due to the way browsers do their math.

  • 1.333333 * 480 = 639.99984
  • 1.334 * 480 = 640.32

As most browsers don't respect fractional pixels, they see 639.99984 as 639.

Well that doesnt look right. Here is the code from the challenge:

 .icing {
    background-color: #B4C34F;
    width: 100%; /*800px*/
    padding: 10px;
  }
  .cake {
    background-color: #f8748f;
    width: 80%; /*640px*/
    margin: 1.25%;
    padding: 10px;
  }
  .filling {
    background-color: #4FB69F;
    width: 75%; /*480px*/
    margin: 1.334%;
    padding: 10px;
   }

The first margin according to the response from the challenge was correct for the first margin percent. I divided 800 by 640 and got 1.25. So I used that as the answer and was told by the test it was correct. So moving on to the next one which was 640 divided by 480. So using the answer provided above I put in 1.334%. That was not the correct answer?

Logic would tell you that if the first answer was correct you should be able to arrive at the second answer the same way. Am I missing something?

Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

since your trying to find the percentage value of the margin, you want to use the value of margin(10) to divide with.

So is it 4.8 or 6.4 ? Still not sure what you mean.