Media queries dont work

Hi I want to do

@media (max-width: 300px) {
  header {
    color: red;
  }
}

Unfortunately it doesn’t work

but the same code with other parameter of pixels works well.

@media (max-width: 400px) {
  header {
    color: red;
  }
}

Could anyone tell me why code above doesn’t work and how to fix it to have media with max-width:300px

Whole code below and there https://codepen.io/pawe-micho/pen/GRoLJLY

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<div id="container">

  <header id="title">
    <h1>Software World</h1>
    <p id="Description">Entertainment which creates software for people</p>
  </header>

  <form action="send_it_somewhere.html" id="survey-form" method="POST">

    <div class="input-div">

      <input type="text" id="name" name="name" required placeholder="Name">
    </div>

    <div class="input-div">

      <input type="email" id="email" name="email" required placeholder="E-mail">
    </div>

    <div class="input-div">

      <input type="number" id="age" name="age" min="1" max="100" placeholder="Age">
    </div>

    <div class="input-div">
      <label for="dropdown" id="dropdown">How do you want to pay?</label>
      <div style="height:5px;"></div>

      <select name="dropdown" id="dropdown">
        <option value="all">All at once</option>
        <option value="months12">12 months</option>
        <option value="months6">6 months</option>
        <option value="Other">Other</option>

      </select>
    </div>

    <div class="input-div gender-div">
      <h3>Gender:</h3>
      <div>
        <label for="male" id="male">Male</label>
        <input type="radio" name="gender" id="male" value="male">
      </div>

      <div>

        <label for="female" id="female">Female</label>
        <input type="radio" name="gender" id="female" value="female">
      </div>

    </div>

    <div class="input-div checkbox">
      <h3>What would you like to have in your software?</h3>
      <div style="height:10px;"></div>
      <label for="pc_system">Access on PC desktop</label>
      <input type="checkbox" name="pc_system" id="pc_system" value="pc_system">
      <div class="blank-div"></div>

      <label for="android-system">Access on Android</label>
      <input type="checkbox" name="android-system" id="android-system" value="android-system">
      <div class="blank-div"></div>

      <label for="ios-system">Access on IOS </label>
      <input type="checkbox" name="ios-system" id="io-system" value="ios-system">
      <div class="blank-div"></div>

      <label for="online_mode">Online Mode</label>
      <input type="checkbox" name="online_mode" id="online_mode" value="online_mode">
      <div class="blank-div"></div>

      <label for="payment">Payment</label>
      <input type="checkbox" name="payment" id="payment" value="payment">
      <div class="blank-div"></div>

      <label for="making_accounts">Making accounts</label>
      <input type="checkbox" name="making_accounts" id="making_accounts" value="making_accounts">
      <div class="blank-div"></div>

      <label for="support">24/7 Helpline</label>
      <input type="checkbox" name="support" id="support" value="support">
      <div class="blank-div"></div>

    </div>

    <div class="input-div question-div">
      <label for="question" id="question"><b>Ask a question </b></label>
      <textarea name="question" id="question"></textarea>
    </div>

    <div class="button-box">

      <button type="submit">Submit</button>
      <button type="reset">Reset</button>

    </div>

  </form>

</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}
body {
  background-color: black;
  font-family: "Helvetica", Arial, Lucida Grande, sans-serif !important;
}
body:before {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-image: url("https://cdn.pixabay.com/photo/2017/11/12/14/12/photo-2942577_960_720.jpg"); // your image
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
  filter: blur(2px);
  z-index: -9;
}

form {
  margin: 0 auto;
  padding: 20px;
  max-width: 500px;
  background-color: rgba(0, 0, 0, 0.8);
}
form .input-div {
  color: #fff;
}

form input[type="text"],
form input[type="email"],
form input[type="number"] {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  padding: 10px;
  color: #fff;
  width: 100%;
  font-size: 30px;
  border-bottom: 2px solid #00bfff;
  transition: 0.5s;
}
form input:focus {
  border-bottom: 2px solid #005aaa;
}
::placeholder {
  font-size: 30px;
  color: #c0c0c0;
  transition: 0.5s;
}
form input:focus::placeholder {
  transform: translateX(15px);
}
.input-div {
  margin-bottom: 20px;
}
.select-div {
  margin: 0 auto;
  max-width: 300px;
}
select {
  width: 100%;
}
.gender-div {
  text-align: center;
}
.input-div.gender-div div {
  display: inline;
}
.gender-div input {
  width: auto;
}
.checkbox {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  font-size: 18px;
}
.input-div.checkbox {
  margin-bottom: 20px;
}
.question-div * {
  width: 100%;
  text-align: center;
}
.question-div label {
  display: block;
}
.button-box {
  text-align: center;
}
button {
  padding: 10px;
  border: none;
  background-color: #483d8b;
  color: #fff;
  font-size: 30px;
  margin: 0 10px 0 10px;
  transition: 1.5s;
}
button:hover {
  background-color: #372c7a;
  cursor: pointer;
}

@media (max-width: 300px) {
  header {
    color: red;
  }
}

Are you sure that your screen width is 300px or less when you are testing?

1 Like

I suppose you didn’t shrink the browser width enough.

Just like @ProgMan pointed out it is most likely because you can’t reduce browser width to less than 300px.

I sent a picture below which shows that i got less than 300px

It seems that it has something to do with the layout of codepen.

When I fiddle around with some different combinations of open/closed dev tools, open/closed codepen code windows I can reproduce it.

When I go into the “Responsive Design Mode” of Firefox and make both width and height under 300px, but decrease the height with the mouse, so that the layout changes, the color changes from black red.

miku86 might be right. Changed when i squeezed though