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
Robert James
20,491 PointsResponsive design
Im working through the 'smells like bakin' project on the build a responsive website section. When converting all the margins and paddings from px to % in the style.css what do we base the context value on.
For example in the style.css we have...
#intro {
margin: 50px 0 75px 0;
}
to convert we do target / context = result
the target is 50 for top-margin but what width do we base the context in, the container width or the .grid width assigned to that div?
Thanks
5 Answers
Wayne Priestley
19,579 PointsIts the grid width so 50/1200=.041666667%
I would suggest putting in all the numbers to make sure your layout is correct.
Robert James
20,491 Pointsso are you saying that if #intro was assigned to the grid .grid_8 and the width of that grid was 660px it would be
50 / 660 = 0.0757575 * 100 = 7.57575%
Thanks for your response!
Wayne Priestley
19,579 PointsSorry Robert i forgot to mention moving the decimal 2 places to the right.
If grid_8 was 660px it would be 55% of the total grid size.
You take your target which is 660px and divide that by the total width of your grid in this case 1200px and you get 0.55 then you move the decimal point 2 places to the right 55%
or your grid might be 900px in total, 660px divided by 900px .7333333 move the decimal 2 places gives you 73.3333333%
If you are working out margins etc then you would just do for example a margin of 50px on a grid with a width of 900px = 50px divided by 900px gives you 0.555 then move the decimal 2 and you get a margin of 5.55%
You have it right above, but I don't know if you want the percentage as in the true percentage of the total grid which i have shown or as you demonstrated which would not actually that of the full grid but only a percentage of 8 out of however many grids there were if that makes sense.
phew :)
Nick Pettit
Treehouse TeacherHi Robert James,
Let me know if you're still having trouble with this issue. If you provide some more specific details I should be able to help.
Robert James
20,491 PointsHi Nick
The issue i am having here is with the padding, converting it to a percentage.
With the margins i know when using the grid system we are basing the context on the width of that grid.
So for example margin-right: 50px and the grid that this element was in was 500px. You divide 50 by 500 giving 0.01 the multiply by 100, giving 10, so your margin-right is 10%. This works.
With the padding tho i dont know where to get the context value from, as everything i have tried changes the element!
Hope this makes sense to u and you understand what i mean.
Thanks for the help
Nick Pettit
Treehouse TeacherHi James,
If you add padding on the left and right sides, it will add to the total width of the element. In a grid, this will end up changing the layout, so you can't really do that in this case. Does that make sense? If not, here's a video that explains the box model in more detail: http://teamtreehouse.com/library/css-foundations/the-box-model/the-css-box-model-concept-3
Robert James
20,491 PointsHi Nick
The issue i am having here is with the padding, converting it to a percentage.
With the margins i know when using the grid system we are basing the context on the width of that grid.
So for example margin-right: 50px and the grid that this element was in was 500px. You divide 50 by 500 giving 0.01 the multiply by 100, giving 10, so your margin-right is 10%. This works.
With the padding tho i dont know where to get the context value from, as everything i have tried changes the element!
Hope this makes sense to u and you understand what i mean.
Thanks for the help