Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Robert James
Robert James
20,491 Points

Responsive 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
Wayne Priestley
19,567 Points

Its the grid width so 50/1200=.041666667%

I would suggest putting in all the numbers to make sure your layout is correct.

Robert James
Robert James
20,491 Points

so 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
Wayne Priestley
19,567 Points

Sorry 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
STAFF
Nick Pettit
Treehouse Teacher

Hi 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
Robert James
20,491 Points

Hi 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
Nick Pettit
Treehouse Teacher

Hi 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
Robert James
20,491 Points

Hi 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