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
Thomas MacFarlane
2,430 PointsHUH??? Responsive Web Design Smells Like Bakin Margins and Paddings
Allison just says "Change the rest of the margins and padding in your page"
I have no idea how to do this I was trying to change the .btn:
.btn {
color: #FAF3BC;
background: #4FB69F url('img/texture.png') no-repeat right top;
padding: 15px 30px;
margin: 40px 0px;
border-radius: 25px;
text-transform: uppercase;
}
but the calculations I get are wayyyyyy off like not even the right ballpark, please show me how I'm supposed to calculate the padding and margin :S
e.g. Padding 15px - Element Height - I don't even know I was guessing about 52px and that gives a 28.84% which gives a GIANT padding.
5 Answers
Thomas MacFarlane
2,430 PointsSolved it mate! Two things here:
The nav bar:
"If the containing block’s width depends on the element to which percentage margins are applied, the resulting layout is undefined in CSS2.1. More verbosely this would be apparent for floated or absolutely positioned elements without an explicit width set, where a child element has margin expressed as a percentage. The parent element needs to know the dimensions of the child element to compute its own width (shrink-wrapping the contents), but the child box element also needs to know the parent's width to compute its margin (and hence its dimensions)."
This is probably one of the reasons that it was changed in the new format.
Secondly, the padding and margin percentages:
Note that even for the top and bottom margins the percentage value will refer to the width of the containing block.
Same goes for the padding, except that is based on the element itself, not its containing block.
Hope this can help someone else!
Vijay Rangan
7,543 PointsI thought that would have been the problem. But I did not know that didn't apply to padding of the selected element. Thanks.
Vijay Rangan
7,543 PointsHi Thomas, could you reiterate your question? what exactly do you want to achieve and what is it that has you stuck ?
Thomas MacFarlane
2,430 PointsAt the end of the video, Allison says
"Keep these techniques in mind as you begin to convert the rest of margins in the Smells Like Bakin' website from pixels to percentages"
I don't understand how to change the rest of the margins and padding, the formula of target / context does not work. Example is the li items in the nav bar. margin-right: 40px. Target 40 / width of containing nav element 538px = 7.4349% which displays a margin of 15px, not 40px.
Vijay Rangan
7,543 PointsGive me a little time, I'll go over the project files and get back to you soon :)
Thomas MacFarlane
2,430 PointsThanks, I'd really appreciate that. I don't understand why we've been left in the dark between videos.
Vijay Rangan
7,543 PointsDon't worry. I'm sure it's just a matter of figuring out what our "context" is. I haven't looked at the source code yet. Get back to you ASAP.
Thomas MacFarlane
2,430 PointsAll the other changes to padding and margin went unaffected, the only two I am having problems with are:
.btn {
color: #FAF3BC;
background: #4FB69F url('img/texture.png') no-repeat right top;
padding: 30px 15px;
margin: 40px 0;
border-radius: 25px;
text-transform: uppercase;
}
I can't convert to correct %s and
ul.nav li {
float: left;
margin-right: 40px;
}
When I convert that to %s the nav bar wraps to the next line... I'll update my codepen above so you can see
Thomas MacFarlane
2,430 PointsOK.... I have everything working now... EXCEPT for that nav bar. Why does it wrap? That is the one thing I cannot figure out.
Thomas MacFarlane
2,430 PointsHey buddy where have ya gone?
Vijay Rangan
7,543 PointsHey Thomas... Sorry.. Got caught up with work.. I'll try and give you an answer today..
Thomas MacFarlane
2,430 PointsCheers, I sorted out all the padding and margins, the only problem I have now is with the nav bar, see my updated question here: https://teamtreehouse.com/forum/creating-flexible-margins-nav-bar-wrapping-on-smells-like-bakin-website
Thomas MacFarlane
2,430 PointsThomas MacFarlane
2,430 PointsCurrent code is at http://codepen.io/anon/pen/ebldH
(Font sizes are funny because I did the extra credit on http://teamtreehouse.com/library/websites/build-a-responsive-website/introduction-to-responsive-web-design)
I don't understand how to change the margin and padding for the .btn class, the copyright div etc etc, all instances of margin and padding. The values I get are all off.
The video I just watched is http://teamtreehouse.com/library/websites/build-a-responsive-website/creating-a-fluid-foundation/creating-flexible-margins