Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Responsive Design - Scalable Images Quiz

I am being asked to Convert the padding on .cake from pixels to percentages.

I was under the impression that i would just do 10/700 and that would be the correct answer but it's not accepting it.

Am i missing something? i've been trying to get it done for a while. Any help would be greatly appreciated it.

.icing {
background-color: #B4C34F;
width: 100%; /*700px*/
 padding: 10px;
}
.cake {
background-color: #f8748f;
width: 85.714285714%; /*600px*/
margin: 1.428571429%;
padding: 10px;
}

8 Answers

James Barnett
James Barnett
39,199 Points

Jennifer Lynn & @Leandro - Take note of the comment, at the top of the code challenge.

When setting flexible padding on an element, your context is the width of the element itself.

Kang-Kyu Lee
Kang-Kyu Lee
52,045 Points

Thank you James "context is the width of the element itself" It does make sense! Tutorial video didn't say the same thing (and let us memorize) Flexible goes width-margin along with outer box, padding would go along the element itself... learning!

Axel Uriel Martínez Castillo
Axel Uriel Martínez Castillo
4,265 Points

Hi Leandro,

What was the original padding in pixels? 10px?

Remember to use the formula "target / context" and then multiply by 100.

That might help

the original padding was 10px. The answer i get from target / context and then multiplied by 100 is not accepted.

Not exactly sure what else needs to be done.

James Barnett
James Barnett
39,199 Points

Leandro -

Remember: Use the full number with all of the decimal places, no rounding.

If you are still having trouble, post your math here, and we'll see if we can get you straightened out.

1.4285714285714285714285714285714

This is what I get.

10/700 = 0.014285714285714285714285714285714

0.014285714285714285714285714285714*100 = 1.4285714285714285714285714285714%

This will not be accepted. Thoughts?

Akeem Sterling Brown
Akeem Sterling Brown
7,533 Points

This isnt working for me either its not very specific aswell..

For reference:

When setting flexible padding on an element, your context is the width of the element itself.

.cake { background-color: #f8748f; width: 85.714285714%; /*600px*/ margin: 1.428571429%; padding: 10px; }


target / context = result

target = The padding of the element context = width of the element

James Barnett
James Barnett
39,199 Points

Kevin Jones -

I edited your answer to give a hint about the formula rather than just give away the answer.

Stacy Salles
Stacy Salles
3,413 Points

I have had the same problem. One must know the target and the context. In this case the .container is not the context. The width of .cake in px is the context.