It is necessary on the page budova.org to apply such code In firefox, everything works fine, but chrome does not want. What could I miss?

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>

  • Added background , for clarity, everything works ... And even in chrom && opera - Air
  • <!DOCTYdivE html> ? - Qwertiy ♦
  • Well, you big-eyed))) did not even notice ...)) - Air
  • @Qwertiy, rather he is all divky me on p - Node_pro

1 answer 1

  1. Correct <!DOCTYdivE html> to <!DOCTYPE html> (not relevant)
  2. Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head
  3. CTRL + F5
  • 1. This is not a fact that does not apply. 2. meta viewport for desktop browsers does not affect anything the same? - Qwertiy ♦
  • @Qwertiy, if the adaptive mode is turned on in chrome, affects - Node_pro
  • Great, thanks for adding <meta name = "viewport" content = "width = device-width, initial-scale = 1"> helped. A doctype messed up accidentally) But again, grateful. - Kyzka Valera
  • @Kyzka Valera, contact) - Node_pro