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
Jared Knetzer
2,992 PointsStuck on Exercise for Responsive Design - Pixels to Percentages
3 on this exercise keeps telling me I'm wrong, but I don't think I am - my answer is 60%. What am I doing wrong?
2 Answers
Paul Graham
1,396 PointsYou're not calculating percentages correctly.
The formula is Target / Context
Target is what you're sizing, context is the containing element.
The three formulae would therefore be 500/500, 400/500, and 300/400.
Jared Knetzer
2,992 PointsThank you Paul - so since ".filling" is contained in ".cake", it inherits the ".cake" width of 400 pixels or 80%?
Paul Graham
1,396 PointsEverytime you drop or raise a level in the DOM, your context changes on ANYTHING that's a relative unit. That means ems, percentages, anything. Think very hard about the implications of this as you write code.
That means since all those divs are contained inside each other, they are all at different levels of the DOM.
The first calculation is .icing. The target size (the designed size on a comp maybe) is 500 pixels and to get the percentage, you'd divide that width by the context, which is the width of the parent (in this case .container) and so on down the line. To get the context you only care about the next highest CSS inheritance. In these examples, it's the parents. But stepping up the DOM tree it would be .container, then <body> then <html> then the width of the browser window.
This also holds for all ems when setting padding or margin or font sizes. It's also the reason people like CSS preprocessors to manage these calculations as they can get very confusing.
Paul Graham
1,396 PointsJust to be clear though, you only care about the TARGET size, not the relative size in percentage. Those relative sized numbers are not useful to you when calculating a new relative size.