Can anyone explain to me what a media query is?

[khoudoura06]

Tell us what’s happening:
Describe your issue in detail here.

  **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 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

Challenge: Use a media query to change a variable

Link to the challenge:

freeCodeCamp.org

[Jaydog]

Are you asking what a media query is in general or are you asking about the challenge you are currently doing? Are you stuck?

[Roma]

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

[khoudoura06]

Yes, I’m asking what’s a media query in general, I passed the challenge, but the concept of a media query stills ambiguous to me.

[Jaydog]

Hi
Others will be able to explain better than I can but generally media queries are used to help make sure that the webpage looks good no matter what screen size it is being viewed on. There is a huge difference between a mobile phone screen and a pc monitor. If you try to take all the info on a pc screen and squeez it into a mobile phone it just can’t work.
A media query is one way of dealing with the problem. Example, on a big screen I might have 6 pictures in a row but on a mobile screen it would look better to have just 1 picture per row. A media query allows us to make that change by saying for instance at screen sizes below width 500px stop displaying all the images in one row and display each in it’s own row

[DanCouper]

IF {something is true}:
  APPLY this CSS

So

@media (max-width: 800px) {
  p {
    color: red;
  }
}

IF width of the screen is under 800px:
  Make all p tags have the colour red

Or

@media (min-width: 800px) {
  h1 {
    font-size: 200px;
  }
}

IF width of the screen is over 800px:
  Make all h1 tags have an enormous font size

Or

@media (orientation: landscape) {
  header::before {
    content: "you're viewing this in landscape orientation";
    display: block;
    background-color: pink;
    padding: 1rem;
    text-align: center;
  }
}

IF the webpage is being viewed in landscape:
  Add a pink box before every header with a message.

Or

@media (hover: hover) {
  a:hover {
    color: blue;
    text-decoration: underline;
  }
}

IF device supports hover:
  Apply some hover styles to anchors

Etc, see @media - CSS: Cascading Style Sheets | MDN for the full list