Need help! Basic CSS - Attach a Fallback value to a CSS Variable

Need help! Basic CSS - Attach a Fallback value to a CSS Variable
0

#1

I’m not sure why it’s not working…Help please!
The background default color is supposed to be black & it stays gray after I input the code and test it???

I’m lost at this point. I’ve redone the code 20-30 times.


    /* change code below */
    background: var(--penguin-skin, black);
    /* change code above */
  
    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }
  
  .penguin-bottom {
    top: 40%;
    left: 23.5%;
  
    /* change code below */
    background: var(--penguin-skin, black);
    /* change code above */

#2

issue fixed…asdfasdfasdf


#3

Still not working. I am 100% sure the code is fine.

Just in case: Tried different browser and incognito.


#4

Yeah it works… I somehow got it to work.

Thanks,


#5

Man, it took me some time, but I figured it out: per default, there’s a typo in the variable - just add “black” and leave the typo alone.
Don’t copy/paste the whole var(–penguin-skin, black);


#6

I still can’t figure this one out! Here is my code:

.penguin-top {
top: 10%;
left: 25%;

/* change code below */
background: var(--pengiun-skin);
background: var(--penguin-skin,  black);
/* change code above */

width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;

}

.penguin-bottom {
top: 40%;
left: 23.5%;

/* change code below */
background: var(--pengiun-skin);
background: var(--penguin-skin,  black);
/* change code above */

What am I doing wrong?


#7

Could you please let me know what was the resolution?


#8

I just reset the entire challenge & it finally worked. I’m not sure why it didn’t work at first.


#9

That worked ! Resetting the code and assigning the fallback value helped.