当减肥页面移动视图时，标题中的巨大白色差距

Question

如果您在移动设备或平板电脑视图中转到此页面（https://www.comparestonehengetours.com/），则徽标顶部会显示大量空白区域。有没有办法删除所有的空白区域，以便它只是很好地显示徽标？

我附上了一张图片，以帮助更好地解释我的意思。

谢谢，克里斯

Answer 1

您应该学会在Chrome中使用inspect元素。

如果这样做，您可以使用指针选择元素并追踪填充。

你可以看到你是否填充了前两个填充值和边距0它会消失。

Answer 2

如果您覆盖设置填充和边距的这些规则，您应该拥有它：

 @media only screen and (max-width: 500px) and (min-width: 450px)
 #mj-header {
     /* padding: 55px 0 0px; */
 }

@media screen and (max-width: 700px)
#mj-header {
    /* padding: 55px 0 0; */
    /* margin: 55px 0 0; */
}

P.S。发布直播网站链接并不好。如果可以，最好尽量发布问题的样本。

Answer 3

这是因为屏幕缩小时顶部有巨大的填充。它在CSS里面。

卸下：

@media only screen and (max-width: 1000px) and (min-width: 720px) {
  #mj-header {
    padding: 25px 0 5px;
  }
}

或者说：

@media only screen and (max-width: 1000px) and (min-width: 720px) {
  #mj-header {
    padding: 5px 0;
  }
}

来自你的CSS。

希望这有帮助！

Answer 4

快速解决方法是放置媒体查询（在本例中为标准iphone）

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

并相应地调整填充和边距（55px加上最上面的110个白色间隙。

希望这有帮助！