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 trialAusten Robinson
884 PointsFluid 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
Courses Plus Student 9,647 Pointswhat you need to do is divide the margin of filling not the width.
10 / 640 = (answer)
Chase Lee
29,275 PointsCould you give a link to your problem.
Austen Robinson
884 PointsIm 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
29,275 PointsThe correct percentage would just be what you've got.
Austen Robinson
884 PointsWell, 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
39,199 PointsUsing 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
.
Austen Robinson
884 PointsWell 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
Courses Plus Student 9,647 Pointssince your trying to find the percentage value of the margin, you want to use the value of margin(10) to divide with.
Austen Robinson
884 PointsSo is it 4.8 or 6.4 ? Still not sure what you mean.
Elliott Frazier
Courses Plus Student 9,647 PointsElliott Frazier
Courses Plus Student 9,647 PointsP.S. don't forget to move it up two decimals