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
Leandro Bermeo
526 PointsResponsive 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
39,199 PointsJennifer 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.
Axel Uriel MartÃnez Castillo
4,265 PointsHi Leandro,
What was the original padding in pixels? 10px?
Remember to use the formula "target / context" and then multiply by 100.
That might help
Leandro Bermeo
526 Pointsthe 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
39,199 PointsLeandro -
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.
Jennifer Lynn
5,360 Points1.4285714285714285714285714285714
This is what I get.
10/700 = 0.014285714285714285714285714285714
0.014285714285714285714285714285714*100 = 1.4285714285714285714285714285714%
This will not be accepted. Thoughts?
Akeem Sterling Brown
7,533 PointsThis isnt working for me either its not very specific aswell..
Kevin Jones
Courses Plus Student 7,583 PointsFor 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
39,199 PointsI edited your answer to give a hint about the formula rather than just give away the answer.
Stacy Salles
3,413 PointsI 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.
Kang-Kyu Lee
52,045 PointsKang-Kyu Lee
52,045 PointsThank 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!