Convert the padding on .cake from pixels to percentages.

This is still inconsistent. The second video, "Creating Flexible Margins" teaches converting the margins from px to %. Padding is not discussed. The third and final video, "Scalable Images" teaches about scaling images. Padding is not discussed. The final code challenge tests on padding.

i used the the .cake width percentage and got it to work.

.. This isn't taught anywhere in the videos, it actually irritates me that this is still a problem and I'm seeing constant inconsistencies in the lessons. Not sure I'm going to keep my Gold membership if they can't fix a small problem like this after 9 months. I did find a solution however after messing with it, I had to add the original padding of 10px to the width of 600px for the width of .cake for a total context of 610px ... then I did 10px / 610 px = 1.63934426229508%

Update: On the VERY NEXT PROBLEM it's not the same equation :/ - In .filling I had to use a context of JUST the width "500px" without the padding of "10px" to divide. Now I'm just confused, they are two different formulas..which one is right..and why has no one fixed this?

i found the correct answer

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

Alejandro,

Double check, I struggled with this for a bit but you need to make sure you are using the correct formula and variables.

Good luck!

Rob

Alejandro -

If you are still having trouble, please post ...

• a link to the code challenge you are working on.
• the step of the code challenge you are having issues with
• a "working" example using codepen.io or something similar

I am having the same issue. I ame not sure what variable to use as my context..

        .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;

am I suppose to be using the .icing (700px) as my context or the .cake width of (600px) I tried both and still didnt get it correct.

i figured but i don't get it why padding and margin calculation is different than each other.when the video did not mention anything about padding you would guess padding is the same but it's not. which one is right? code challenge might be giving error sometimes.so are the margin and padding calculation different than each other??

.cake { background-color: #f8748f; width: 85.714285714%; /600px/ margin: 1.428571429%; /* (10/700) 100 = 1.42% */ padding: 10px; / (10/600) *100 = 1.66% */ }

It would be helpful if additional notes about creating padding could be added somewhere in the lesson. When searching the site for 'scalable padding in css', the video 'Converting Pixels to Percentages' was the closest I could come to addressing how to handle padding. In the video, the instructor Allison changes the width of the website's container div to 90% while stating "There is no science or formula to this number. It just makes sure that we have a little bit of buffer or padding between the browser window and the content of our website." The only other mention of padding I could find in the lesson was from the 'Scalable Images' video where the instructor Allison says "Now that the text throughout our website is in EMs and our grid, margins, and paddings are in percentages,..". There doesn't seem to be any instruction on padding, other than to say 'there's no science or formula' to changing the width of the website's container div to create a padding. Could you perhaps add or alter a video to cover the topic since it's a challenge for advancing? Thanks.

Guys, why is it taking 9 months to add a section about converting padding into percentages? Its still broken and there is no mention about how to calculate padding???

The padding percentage is directly related to the element the padding is located within. For example: .cake's padding is directly related to the width of .cake. Think of padding existing between the content and the walls of the container where as margins exist between the container itself and the "larger container. For example when dealing with margins, .cake was influenced by .icing because it was contained within the width of .icing. The padding however has no relation to .icing because padding stays within the dimensions of .cake.

I hope this makes sense and for that part is a correct explanation...it is after all the reason I used to solve this challenge.

the correcct answer is

10/500=2%

Thanks James Barnett, your solution has worked.

I also found this to be confusing. Once James mentioned the explanation was in the HTML comments it made sense, but I have to imagine most people over looked that as I did. As it is not consistent with any of the previous quizzes, and most people assume its just "cutting and pasting" the code from the previous quiz question on the ones that build as it has also done previously. In assuming this I just shoot to the portion of the code thats relevant, not reread through the entire code each time.

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

.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: 1.6666666666666667%; } .filling { background-color: #4FB69F; width: 83.33333333%; /500px/ margin: 1.6666666666%; padding: 2%;