Не работает запрос media для телефонов

Question

Делаю медиа-запрос для телефона, а он не работает (должно быть в один столбец, при разрешении от 0 до 600):

* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3);
}

.card {
  margin: 1.5em;
}

.card > img {
  width: 100%;
}

@media (max-width: 800px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5);
  }
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(9);
  }
  .card {
    margin-inline: 0;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="card"><img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt=""></div>
    <div class="card"><img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt=""></div>
    <div class="card"><img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt=""></div>
    <div class="card"><img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt=""></div>
    <div class="card"><img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt=""></div>
    <div class="card"><img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt=""></div>
    <div class="card"><img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt=""></div>
    <div class="card"><img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt=""></div>
    <div class="card"><img src="img/1696602053_gas-kvas-com-p-kartinki-s-prirodoi-6.jpg" alt=""></div>
  </div>
</body>

</html>

На сайте:

На телефоне:

Answer 1

Все запросы работают, как и должны.

* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
}

.card > img {
  width: 100%;
}

@media (max-width: 800px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
  }
}
@media (max-width: 600px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
    gap: .5em;
  }
}

<div class="container">
  <div class="card"><img src="https://i.stack.imgur.com/p4a7U.jpg" alt=""></div>
  <div class="card"><img src="https://i.stack.imgur.com/p4a7U.jpg" alt=""></div>
  <div class="card"><img src="https://i.stack.imgur.com/p4a7U.jpg" alt=""></div>
  <div class="card"><img src="https://i.stack.imgur.com/p4a7U.jpg" alt=""></div>
  <div class="card"><img src="https://i.stack.imgur.com/p4a7U.jpg" alt=""></div>
  <div class="card"><img src="https://i.stack.imgur.com/p4a7U.jpg" alt=""></div>
  <div class="card"><img src="https://i.stack.imgur.com/p4a7U.jpg" alt=""></div>
  <div class="card"><img src="https://i.stack.imgur.com/p4a7U.jpg" alt=""></div>
  <div class="card"><img src="https://i.stack.imgur.com/p4a7U.jpg" alt=""></div>
</div>

БЛОГ НА HUSL

Не работает запрос media для телефонов

Ответы (1 шт):