在移动格式中，div不显示，页脚比平时放得更高

Question

在此处输入图像描述

在此处输入图像描述

@media(max-width=768px){
#contact-info .icons-detail{
float: none;
width:100%;
display: block;
height:250px;
border-bottom: #444 solid 1px;
}
}

<section id="contact-info" class="bg-dark1">
<div class="icons-detail">
<i class="fas fa-hotel fa-3x"></i>
<h2>Location</h2>
<p>50 Main Street , 10th street , boston</p>
</div>
<div class="icons-detail">
<i class="fas fa-phone fa-3x"></i>
<h2>Phone Number</h2>
<p>[phone]</p>
</div>

<div class="icons-detail">
<i class="fas fa-envelope fa-3x"></i>
<h2>Email</h2>
<p>[e-mail]</p>
</div>
</section>
<div class="clr"></div>
<footer id="main-footer">
<p>Hotel BT &copy; 2019,All rights reserved</p>
</footer>
</body>
</html>

在移动格式中，div不显示，页脚比平时放得更高。我这样做没有使用flexbox或网格布局。

Answer 1

问题出在媒体查询中。在媒体查询中放入冒号(：(，而不是等号(=(

@media(max-width: 768px){
#contact-info .icons-detail{
float: none;
width:100%;
display: block;
height:250px;
border-bottom: #444 solid 1px;
}
}

我认为这会解决你的问题。

Answer 2

@media中的max-width=768px应为max-width: 768px

@media(max-width:768px){
#contact-info .icons-detail{
float: none;
width:100%;
display: block;
height:250px;
border-bottom: #444 solid 1px;
}
}