Media query doesn't work in Chrome

Need on the page budova.org apply this code In firefox, everything works fine, but chrome does not want to. What could I have missed?

body {
  margin: 0;
  padding: 0;
  font-family: 'Exo 2', sans-serif;
  text-decoration: none;
  background: #fff
}

a {
  text-decoration: none;
  color: #666666;
}

.layout {
  width: 96%;
  padding: 0 2% 0 2%;
  overflow: hidden;
}

.layout .col div {
  margin: 0 10px;
  padding: 10px;
  background: #fff;
  color: #000;
}

.layout div img {
  width: 100%;
  border: 1px solid #bfbfbf;
}

.layout div h2 {
  font-size: 16px;
  text-align: center;
}

#logo {
  margin: 45px auto;
}

.col:hover {
  border: 1px solid #bfbfbf;
  margin: 0px;
}

.col {
  float: left;
  margin: 1px;
  width: 24%;
}

@media all and (max-width: 900px) {
  .col {
    float: left;
    width: 48%;
    height: 257px;
    background: red;
  }
}

@media all and (max-width: 700px) {
  .col {
    float: left;
    width: 48%;
    height: 200px;
    background: green;
  }
}
<!DOCTYdivE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Инженерные системы ЛТД - простые решения для Вашего дома!</title>
  <link rel="stylesheet" tydive="text/css" href="css.css" />
  <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
  <link href="https://unpkg.com/[email protected]/dist/css/micron.min.css" type="text/css" rel="stylesheet">
  <script src="https://unpkg.com/[email protected]/dist/script/micron.min.js" type="text/javascript" async></script>
</head>

<body>
  <header>
    <div align="center" id="logo">
      <img src="images/logo.png" width="390px" ; class="logo" alt="Logo IS" />
    </div>
  </header>

  <div class="layout">
    <div align="center" class="col">
      <div class="col-m">
        <a href="https://devi.kiev.ua/" target="_blank">
          <div><img data-micron="jelly" src="images/devi.png" alt="devi" /></div>
          <h2>Тёплый пол DEVI</h2>
        </a>
      </div>
    </div>
    <div align="center" class="col">
      <div class="col-m">
        <a href="http://vac.budova.org/" target="_blank">
          <div><img data-micron="jelly" src="images/vac.png" alt="пылесос" /></div>
          <h2>Центральный пылесос</h2>
        </a>
      </div>
    </div>
    <div align="center" class="col">
      <div class="col-m">
        <a href="http://carrera.budova.org/" target="_blank">
          <div><img data-micron="jelly" src="images/carrera.png" alt="carrera" /></div>
          <h2>Конвекторы Carrera</h2>
        </a>
      </div>
    </div>
    <div align="center" class="col">
      <div class="col-m">
        <a href="https://devi.kiev.ua/snegotayanie/snegotayanie.html" target="_blank">
          <div><img data-micron="jelly" src="images/devi-ice.png" alt="Снеготаяние devi" /></div>
          <h2>Снеготаяние DEVI</h2>
        </a>
      </div>
    </div>

    <div align="center" class="col">
      <div class="col-m">
        <a href="http://potopa.net.ua/" target="_blank">
          <div><img data-micron="jelly" src="images/potopa.png" alt="Защита от потопа" /></div>
          <h2>Защита от потопа</h2>
        </a>
      </div>
    </div>
    <div align="center" class="col">
      <div class="col-m">
        <a href="https://devi.kiev.ua/informatsiya/veria-2.html" target="_blank">
          <div><img data-micron="jelly" src="images/veria.png" alt="VERIA" /></div>
          <h2>Тёплый пол VERIA</h2>
        </a>
      </div>
    </div>
    <div align="center" class="col">
      <div class="col-m">
        <a href="http://danfoss.biz.ua/" target="_blank">
          <div><img data-micron="jelly" src="images/danfoss.png" alt="Danfoss" /></div>
          <h2>Продукция Danfoss</h2>
        </a>
      </div>
    </div>
    <div align="center" class="col">
      <div class="col-m">
        <a href="http://airelec.com.ua/" target="_blank">
          <div><img data-micron="jelly" src="images/6.png" alt="Airelec" /></div>
          <h2>Конвекторы Airelec</h2>
        </a>
      </div>
    </div>

  </div>

  <div class="clear"></div>
</body>

</html>
Author: Air, 2018-03-15
Source

1 answers

  1. Correct <!DOCTYdivE html> to <!DOCTYPE html> ( not relevant)
  2. Add to head <meta name="viewport" content="width=device-width, initial-scale=1">
  3. CTRL+F5
 2
Author: Node_pro, 2018-03-15 10:39:20