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
Mark Wilkie
7,427 PointsFlexible Margins Code Challenge
Hi guys, I'm working my way through the Responsive Website track and am on the Flexible Margins part. I am understanding the instructions but am having trouble with this:
.container {
max-width: 800px;
}
.icing {
background-color: #B4C34F;
width: 100%; /*800px*/
padding: 10px;
}
.cake {
background-color: #f8748f;
width: 80%; /*640px*/
margin: 1.25%;
padding: 10px;
}
.filling {
background-color: #4FB69F;
width: 75%; /*480px*/
margin: 1.56%;
padding: 10px;
}
The margin for the .filling div is 10px, and have converted it to percentage using the formula given in the video, and every time I get 1.56%. However, the code generator is saying that my answer is incorrect.
I have worked it out as follows: 10 / 640 = 0.015625
0.015625 = 1.56%
Am I missing something here? Or is there a problem with the code generator? Thanks in advance.
4 Answers
Mark Wilkie
7,427 PointsSecond part.
The context is the width of the .cake container not the .filling div itself.
Agh, didn't mean to post a new answer. Should've commented on your answer. Apologies.
Adam Sackfield
Courses Plus Student 19,663 PointsDo you have a link to the question? Also isn't the width 480px for the filling div, thus
10 / 480 = 2.08%
James Barnett
39,199 Points> I had no idea that the padding had to be subtracted from the width of the div.
You can't actually. It only appears to work due to how the math works out.
Consider an element 400px wide with a margin of 100px.
Instead a better way to do it is round up to 3 decimal places.
Adam Sackfield
Courses Plus Student 19,663 PointsI never knew it either, wouldn't it depend on the box-sizing setting as to whether or not you would need to remove the padding before doing the target / context.
Also James Barnett do you have any advice on the question i tagged you in here
Mark Wilkie
7,427 PointsI'm not sure I fully understand...or I think I do but I'm not sure. There is no box-sizing: border-box; property anywhere in the CSS, so surely the width should still be 640px, not 630px?
Adam Sackfield
Courses Plus Student 19,663 PointsWell it may not be in that CSS but It maybe taken into account in the answer to the question. I am a little confused over it myself. I would tag the course tutor in here and they should be able to give clarity.
Michael Branch
6,254 PointsThat should definitely be given some clarity. This wasn't in the video?
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsNo worries I just got it to pass. But I had to take out the padding first to make it pass
I use em for the responsive units see this article for more information
Mark Wilkie
7,427 PointsMark Wilkie
7,427 PointsAh yes that's worked a treat. I had no idea that the padding had to be subtracted from the width of the div. Nevertheless that's stopped me from going crazy. Thanks!
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsNo problems mark it as best answer to let other know. Thanks Mark Wilkie