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
Andrew Posadzy
33 PointsNeed Help Please
I have to convert .cake from pixels to percentages. I just can't seem to get the right answer. Please help
.container, .icing, .cake, .filling {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
.container {
max-width: 700px;
}
.icing {
background-color: #B4C34F;
width: 100%; /*700px*/
padding: 10px;
}
.cake {
background-color: #f8748f;
width: 85.714285714%; /*600px*/
margin: 1.428571429%;
padding: 10px;
}
.filling {
background-color: #4FB69F;
width: 83.33333333%; /*500px*/
margin: 1.6666666666%;
padding: 10px;
}
7 Answers
Shawn Denham
Python Development Techdegree Student 17,802 PointsOne thing I see right away is that you have not closed your comments and you have some comments that are completely mis-formatted.
In css you need to wrap your comment in /* comment here */
Mamal Khan
14,206 PointsYep! Make sure you know how to use Comments in CSS. it's easy as Shawn Denham said...
Also for future questions, It would be easier for you to get your answers if you use tools like Codepen.io
Shawn Denham
Python Development Techdegree Student 17,802 PointsHey Andrew Posadzy can you post the link to the code challenge?
Andrew Posadzy
33 Pointsthe comments are not mine. they were already there
Shawn Denham
Python Development Techdegree Student 17,802 PointsSo step one wants you to convert the padding on .cake from px to %.
They give you a reminder that * When setting ?exible margin on an element, your context is the width of the element’s container. When setting ?exible padding on an element, your context is the width of the element itself.*
Since we are converting the padding we want to look at .cake
.cake {
background-color: #f8748f;
width: 85.714285714%; /*600px*/
margin: 1.428571429%;
padding: 10px;
}
I always remember how to convert by dividing INTO the container. So in this case it we would divide padding/width and that is your answer (note: they are looking for 2 decimal places for the answer).
Let me know if you need help with step 2 :)
Andrew Posadzy
33 Pointsthankyou, i was just putting too many decimal places
James Barnett
39,199 PointsJames Barnett
39,199 PointsActually that's not the issue, the code just wasn't being properly formatted by the forum, I added in the markdown to fix it.