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

CSS

Andrew Posadzy
Andrew Posadzy
33 Points
Posted by Andrew Posadzy
Andrew Posadzy
33 Points

Need Help Please

I have to convert .cake from pixels to percentages. I just can't seem to get the right answer. Please help

http://teamtreehouse.com/library/websites/build-a-responsive-website/creating-a-fluid-foundation/scalable-images-2

.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
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

One 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 */

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Actually that's not the issue, the code just wasn't being properly formatted by the forum, I added in the markdown to fix it.

Mamal Khan
Mamal Khan
14,206 Points
Mamal Khan
Mamal Khan
14,206 Points

Yep! 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 :wink:

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

Hey Andrew Posadzy can you post the link to the code challenge?

Andrew Posadzy
Andrew Posadzy
33 Points
Andrew Posadzy
Andrew Posadzy
33 Points

the comments are not mine. they were already there

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

So 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
Andrew Posadzy
33 Points
Andrew Posadzy
Andrew Posadzy
33 Points

thankyou, i was just putting too many decimal places