移动电话标头的白色空间

Question

我的网站是https://salesportalasia-testsite.azurewebsites.net

使用移动设备查看时，标题处会显示空格。

我已经检查了css中的margin-top代码，但没有成功。

有人可以帮我解决这个问题......

Answer 1

div上的内联样式padding-top: 211px，id =“page”。删除它，这个空白区域将消失。

Answer 2

在媒体查询中分配padding-top:0px !important;

@media (max-width: 767px){
   .wrapper {
      padding-top:0px !important;
    }
}

Answer 3

如果您在移动视图中检查该页面，您会看到某些内联样式正在应用于<div id="page" style="padding-top: 160px"></div>。

它似乎是在custom.min.js函数的setNavigationOffset中设置的。

我希望有所帮助。

Answer 4

我注意到你有填充顶部：顶部是160px。

element.style {
    padding-top: 160px;
}

在页面中，它看起来像主题页面中的硬编码，

您可能在不同的移动设备上有不同的填充顶部，因此请检查并根据设备解决它。这会有所帮助。

Answer 5

使用此css代码删除填充顶部，从而产生空白区域。

#page{
padding-top:0px !important;
}

Answer 6

由于导航元素的多重定位而面临的问题。

@media (max-device-width: 800px) and (orientation: portrait)
@media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
    position: relative!important;
}

上面的类会覆盖你的固定位置类值。

.navigation-fixed-top .navigation {
top: 0;
position: fixed; /* This not work
bottom: inherit;
} 

如果你想克服这里。只需删除相对类

即可

要删除

    @media (max-device-width: 800px) and (orientation: portrait)
@media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
    position: relative!important;
}

否则，如果你想使用上面的类。去掉 ！重要的关键字  像这样改变。

    @media (max-device-width: 800px) and (orientation: portrait)
@media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
    position: relative;
}

因此导航元素会根据优先级自动获取固定的类值。

啤酒花有帮助。！