Error or am I confused?

freeCodeCamp Support
#1

In the lesson about overwriting :root variables, the lesson asks you to “Change the value of --penguin-belly to white in the penguin class.”

So, I navigate to the .penguin class and have entered:

/* Only change code below this line */
   --penguin-belly: white;
    /* Only change code above this line */

and I receive this in the output:
// running tests
The ‘penguin’ class should reassign the ‘–penguin-belly’ variable to 'white’
. // tests completed

This confused me, but I’m still a noob and it’s been a week since I’ve touched the curriculum, so I thought maybe I should enter this:

--penguin-belly var
(--penguin-belly, white);

This, unsurprisingly, messed everything up. So I looked at the solution:
We need to reassign the --penguin-belly variable to white in the penguin class:

  .penguin {
    /* add code below */
    --penguin-belly: white;
    /* add code above */

Exactly what I had entered! To be sure, I copied and pasted the solution in. Still got the same error on the output. I watched the video with the lesson, same situation.

So is it an error, or do I not have enough caffeine to see my mistake??

Edited to mention: the lil penguin guy’s stomach definitely turns white from grey when I input my code.

#2

Hi @braenard !

Welcome to the forum!

It would help to see your code and the challenge link so we can test it for ourselves.

1 Like
#3

are you on Safari? change browser

1 Like
#4

https://www.freecodecamp.org/learn/responsive-web-design/basic-css/change-a-variable-for-a-specific-area

And here is the full code of the lesson, with mine being the input between the

/* Only change code below this line*/
/* Only change code above this line*/

<style>
  :root {
    --penguin-skin: gray;
    --penguin-belly: pink;
    --penguin-beak: orange;
  }

  body {
    background: var(--penguin-belly, white);
  }

  .penguin {
    /* Only change code below this line */
    --penguin-belly: white;
    /* Only change code above this line */
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }

  .right-cheek {
    top: 15%;
    left: 35%;
    background: var(--penguin-belly, pink);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

  .left-cheek {
    top: 15%;
    left: 5%;
    background: var(--penguin-belly, pink);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

  .belly {
    top: 60%;
    left: 2.5%;
    background: var(--penguin-belly, pink);
    width: 95%;
    height: 100%;
    border-radius: 120% 120% 100% 100%;
  }

  .penguin-top {
    top: 10%;
    left: 25%;
    background: var(--penguin-skin, gray);
    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }

  .penguin-bottom {
    top: 40%;
    left: 23.5%;
    background: var(--penguin-skin, gray);
    width: 53%;
    height: 45%;
    border-radius: 70% 70% 100% 100%;
  }

  .right-hand {
    top: 0%;
    left: -5%;
    background: var(--penguin-skin, gray);
    width: 30%;
    height: 60%;
    border-radius: 30% 30% 120% 30%;
    transform: rotate(45deg);
    z-index: -1;
  }

  .left-hand {
    top: 0%;
    left: 75%;
    background: var(--penguin-skin, gray);
    width: 30%;
    height: 60%;
    border-radius: 30% 30% 30% 120%;
    transform: rotate(-45deg);
    z-index: -1;
  }

  .right-feet {
    top: 85%;
    left: 60%;
    background: var(--penguin-beak, orange);
    width: 15%;
    height: 30%;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(-80deg);
    z-index: -2222;
  }

  .left-feet {
    top: 85%;
    left: 25%;
    background: var(--penguin-beak, orange);
    width: 15%;
    height: 30%;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(80deg);
    z-index: -2222;
  }

  .right-eye {
    top: 45%;
    left: 60%;
    background: black;
    width: 15%;
    height: 17%;
    border-radius: 50%;
  }

  .left-eye {
    top: 45%;
    left: 25%;
    background: black;
    width: 15%;
    height: 17%;
    border-radius: 50%;
  }

  .sparkle {
    top: 25%;
    left: 15%;
    background: white;
    width: 35%;
    height: 35%;
    border-radius: 50%;
  }

  .blush-right {
    top: 65%;
    left: 15%;
    background: pink;
    width: 15%;
    height: 10%;
    border-radius: 50%;
  }

  .blush-left {
    top: 65%;
    left: 70%;
    background: pink;
    width: 15%;
    height: 10%;
    border-radius: 50%;
  }

  .beak-top {
    top: 60%;
    left: 40%;
    background: var(--penguin-beak, orange);
    width: 20%;
    height: 10%;
    border-radius: 50%;
  }

  .beak-bottom {
    top: 65%;
    left: 42%;
    background: var(--penguin-beak, orange);
    width: 16%;
    height: 10%;
    border-radius: 50%;
  }

  .penguin * {
    position: absolute;
  }
</style>
<div class="penguin">
  <div class="penguin-bottom">
    <div class="right-hand"></div>
    <div class="left-hand"></div>
    <div class="right-feet"></div>
    <div class="left-feet"></div>
  </div>
  <div class="penguin-top">
    <div class="right-cheek"></div>
    <div class="left-cheek"></div>
    <div class="belly"></div>
    <div class="right-eye">
      <div class="sparkle"></div>
    </div>
    <div class="left-eye">
      <div class="sparkle"></div>
    </div>
    <div class="blush-right"></div>
    <div class="blush-left"></div>
    <div class="beak-top"></div>
    <div class="beak-bottom"></div>
  </div>
</div>

Thanks!

#5

I am in fact on Safari. Everything has worked fine so far, but if it’ll help, I’ll definitely swap to Chrome or Firefox.

Thanks!

#6

It passes for me.

I am using chrome with no extensions.

I thought the issue with safari had already been resolved but I guess not :grinning:

1 Like
#8

I tried Chrome and it worked right off! Thanks so much!

#9

this challenge has a small issue with Safari, it’s being worked on, there should not be others

next time please

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like