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
Sam Hayward
11,673 PointsFlexible margins/padding with undefined context widths?
This generally refers to 'Build a Responsive Website' project > Creating a Fluid Foundation.
By the start of the 'scalable images' video you are expected to have converted all of the margins and padding to percentages.
As I understand it: Margins are found by using the parents element's context Padding is found using the element itself as a context.
I can find the percentages for some of the margins. For example the paragraph with class .btn is contained within a div with class grid_9, which means the containing element of the button has a width of 745px (grid_9 when the container div is at it's max width of 1000px)
However the 'ul.nav li' has a margin-right of 40px, the containing div being the ul. As far as i can tell, the ul element's size is just determined by its content ( its list items ). So what do you do?
Similarly when trying to convert the padding for the .btn class, you need the width of the paragraph with the class .btn. Again, i think this is just determined by the length of the text filling the paragraph, and so you have no defined width value to work with. What do you do?
Any feedback would be greatly appreciated =)
2 Answers
Matt Campbell
9,767 PointsIs there a code challenge asking for exact numbers?
Day to day, it's just whatever looks good. Rule of thumb though, minimum margin of 2% as on small screens, 1% is barely noticeable when spacing things that use the main container as the reference.
Robert James
20,491 PointsI have also been questioning this. Am in the same position as you where the margins i have based of the parent div. Even the margin-right u mention in your original post, I based that off the full width (1000px) giving a margin-right of 4%. When refreshing the browser there is no change, and it works perfectly when scaling down the screen.
As for padding though this doesn't work and i dont know what to divide my original px by to get the correct %. Don't see the point in putting in random numbers as i want to understand how to get the values correctly.
Did you get anywhere with this after?
Was hoping to find a responsive from the video tutor, dont know if we are able to message them personally or whether we just wait to see if they respond to posts!
Sam Hayward
11,673 PointsHey, this was a little while ago now haha. I think I just used Firebug to inspect what a certain percentage value gets me, and used process of elimination. It's a sketchy way to do it, but I wanted to move on as it didn't totally put a spanner in the works. But yeah, some advice from Allison would be cool. I think that the tutors do scour the forums, I know that Ben (Android tutor) is really good for that.
Good luck with your learning =)
Sam Hayward
11,673 PointsSam Hayward
11,673 PointsNo this isn't a code challenge, but it is part of the project.
Yeah I'm sure putting some random values in and seeing what looks good would be fine, but a bit of clarification in the video would have been nice.