0

Нужно на странице budova.org применять такой код В firefox всё прекрасно работает, а вот хром не хочет. Что я мог упустить?

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>

4
  • Добавил background, для наглядности, все работает... И даже в chrom && opera
    – Air
    15 мар 2018 в 10:37
  • <!DOCTYdivE html>?
    – Qwertiy
    15 мар 2018 в 10:39
  • Ну и глазастые вы))) даже не заметил...))
    – Air
    15 мар 2018 в 10:40
  • @Qwertiy, скорее он все дивки меня на p
    – Node_pro
    15 мар 2018 в 10:40

1 ответ 1

2
  1. Исправьте <!DOCTYdivE html> на <!DOCTYPE html> ( не относится к делу)
  2. Добавьте в head <meta name="viewport" content="width=device-width, initial-scale=1">
  3. CTRL+F5
6
  • 1. Вот не факт, что не относится. 2. meta viewport для десктопных браузеров ни на что не влияет же?
    – Qwertiy
    15 мар 2018 в 10:40
  • @Qwertiy, если в хроме адаптивный режим включен, влияет
    – Node_pro
    15 мар 2018 в 10:42
  • Супер, благодарю добавление <meta name="viewport" content="width=device-width, initial-scale=1"> помогло. А доктайп испортил случайно) Но опять же благодарен. 15 мар 2018 в 10:47
  • 1
    Тому, кто написал - 'Добавьте в head "meta name="viewport" content="width=device-width, initial-scale=1"' - ЖМУ руку! Спасибо! А то начал паниковать. Что я только не писал в meta..., а это забыл. 14 окт 2019 в 15:51
  • 1
    Node_pro отдельное большое спасибо! Ситуация была аналогична )))))))
    – Ivan Kono
    9 дек 2019 в 8:06

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.