Problem with size of penguin

[1271xx]

Tell us what’s happening:
Describe your issue in detail here.
the lesson says that if the size is smaller or bigger than the actual media it (the penguin) won’t change size, which I understand, but I tried this (adjusting my pixels with my code) and around 10px smaller or bigger than the actual media size and the penguin still reduces in size. So it means if it DOES get smaller or bigger in pixels the penguin still changes (within around 10px)
I’m confused…

  **Your code so far**

<style>
:root {
  --penguin-size: 300px;
  --penguin-skin: gray;
  --penguin-belly: white;
  --penguin-beak: orange;
}

@media (max-width: 350px) {
  :root {
    /* Only change code below this line */

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

.penguin {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
  width: var(--penguin-size, 300px);
  height: var(--penguin-size, 300px);
}

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

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

.belly {
  top: 60%;
  left: 2.5%;
  background: var(--penguin-belly, white);
  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: 5%;
  left: 25%;
  background: var(--penguin-skin, black);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 120% 30%;
  transform: rotate(130deg);
  z-index: -1;
  animation-duration: 3s;
  animation-name: wave;
  animation-iteration-count: infinite;
  transform-origin:0% 0%;
  animation-timing-function: linear;
}

@keyframes wave {
    10% {
      transform: rotate(110deg);
    }
    20% {
      transform: rotate(130deg);
    }
    30% {
      transform: rotate(110deg);
    }
    40% {
      transform: rotate(130deg);
    }
  }

.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:-23%;
  background: white;
  width: 150%;
  height: 100%;
  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%;
}

body {
  background:#c6faf1;
}

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Challenge: Use a media query to change a variable

Link to the challenge:

freeCodeCamp.org

[jaket]

Hello @1271xx ,

I created a fiddle with this Challenge: Use a media query to change a variable

I’ve used jsfiddle, as in the result pane, when it is re-sized, you can see the width of the pane in the top left.

spoiler alert: css has answer to challenge

https://jsfiddle.net/ptsc6oqh/

When you change the size from 350px to 351px then you can see the change in the penguin size.

I’m not sure of the technique you are using to assertain the media width but the jsfiddle method does not do the same.

Hope that helps out - and welcome to freecodecamp

On a side note I had to read up about css properties, I know they exist but never use them as they are not IE compatible

Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN

[1271xx]

Thank you very much for your help. I did however come right with sizing eventually. I also had a look at some of your coding re js, I’m busy with iteration right now and noticed some of it within your penguin code, what can I say, I’m learning… (I didn’t know one can use js in this type of thing)
I’m really sorry you are struggling with IE, I use FF for my code etc and I don’t have any problems
Yes, I did look at css properties…it gets VERY involved…lol, I finished that course too but really feel I should go back and go over it again because there’s lots involved (esp with properties!
When I get a chance I’ll really look at your code better but I’m busy with js right now as I write this, but I will look at it at some point, just want to get my front end cert finished, it’s my main focus now so
But thank you anyway…