Медиа запрос не работает в Chrome

218
16 марта 2018, 12:00

Нужно на странице 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/webkul-micron@1.1.3/dist/css/micron.min.css" type="text/css" rel="stylesheet"> 
  <script src="https://unpkg.com/webkul-micron@1.1.3/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>

Answer 1
  1. Исправьте <!DOCTYdivE html> на <!DOCTYPE html> ( не относится к делу)
  2. Добавьте в head <meta name="viewport" content="width=device-width, initial-scale=1">
  3. CTRL+F5
READ ALSO
ReactJS получить CSS-стиль родителя
CSS

ReactJS получить CSS-стиль родителя

Добрый день всем, есть ли возможность в reactjs получить стиль родительского компонента, например: Parent компонент:

 197
Как сделать появление/скрытие блока?
CSS

Как сделать появление/скрытие блока?

Подскажите метод css или jquery чтобы при наведении блок, который лежит далеко от наведенного, изменялсяПри наведении на стрелку необходимо,...

 238
Как найти нужные стили в WordPress?
CSS

Как найти нужные стили в WordPress?

Порой кажется, что разработчики тем для ВП соревнуются между собой в запутанности тем

 212
Белая граница у тени в svg
CSS

Белая граница у тени в svg

Проблема в отображении тени

 196