手机标题中的空白答案

【问题标题】：White space at header in mobile手机标题中的空白
【发布时间】：2017-11-24 01:09:23
【问题描述】：

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

使用移动设备查看时，标题处有空白。

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

谁能帮我解决这个问题...

【问题讨论】：

您好，欢迎来到 Stackoverflow！请花时间阅读stackoverflow.com/help/mcve，然后回来编辑您的问题。请注意，指向外部网站的链接将来对其他人没有帮助，因为该位置的内容可能会发生变化。

标签： html css wordpress header

【解决方案1】：

您在 id="page" 的 div 上有一个内联样式 padding-top: 211px。删除它，这个空白就会消失。

【讨论】：

这样的问题不应该得到答案。
@connexo，也许你是对的，但这只花了我 1 分钟的时间来检查。如果需要更多，我根本不会回答。
这不是需要多长时间的问题，而是不让OP的问题，对于SO初学者来说，认为这是一个正确的提问方式。
@connexo，好的，知道了。

【解决方案2】：

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

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

【讨论】：

这样的问题不应该得到答案。
他是stackoverflow的新手......他以后会清楚地发布
正是因为，尽管 OP 是新手，但立即帮助他走上正确的道路很重要。如果他成功地回答了这种问题，我保证下一个问题的质量也不会更好。

【解决方案3】：

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

看起来它是在 setNavigationOffset 函数中的 custom.min.js 中设置的。

希望对你有帮助。

【讨论】：

【解决方案4】：

我注意到您在顶部有 padding-top:160px。

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

在页面中，它看起来像是在主题页面内进行了硬编码，

您可能在不同的移动设备上有不同的 padding-top，因此请检查并根据设备解决问题。这会有所帮助。

【讨论】：

【解决方案5】：

使用此 css 代码删除导致空白的填充顶部。

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

【讨论】：

【解决方案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;
}

所以导航元素会根据优先级自动获取固定的类值..

啤酒花有帮助。！

【讨论】：