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 Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

Posted by Anthony Harrison
Anthony Harrison
1,064 Points

Formula Used to Create Percentage Values?

"target ÷ context = result"

Can anyone give a better example so i can get a clear understanding please?

Abraham Juliot
Abraham Juliot
47,353 Points
Abraham Juliot
Abraham Juliot
47,353 Points

Width Of Child Element In px ÷ Width Of Parent Element In px = total %

I used this from the source below. After testing out some values, it clicked for me. I hope this helps.

http://rqrwd.com/ (really quick responsive web design tool)

1 Answer

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Anthony,

I'll give you two examples as I'm not sure which one of the common two you wish to know about.

First is when you are figuring out grids or want a certain element to fill a certain width of the screen.
We will say we have set a body width of 900px,
We want an image to fill 3/4 of the screen.

target ÷ context = result

675px (3/4 of 900) is the target
900px (the body width is the context)

675 ÷ 900 = 0.75 (then you move the decimal 2 places to the right) 75%

Thats obviously an easy one that you don't need a calculator to know 75% is 3/4 of something, but pick another width, say body of 988px and you have an image of 342px and want a percentage width.

342 ÷ 988 = 0.3461 move x2 places = 34%

Second will be changing px to em units,
A font size of 27px to em,

target ÷ context = result
27 ÷ 16 (the usual default pixel size in a browser) = 1.6875em

Hope this helps.