Question

我的网站是www.rosstheexplorer.com。

以下代码位于我的header.php

中

<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">


<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">

以下代码位于附加CSS

中

@media screen and (min-width: 660px) {
    .mobile-header-img {
        display: none;
    }
}

@media screen and (max-width: 660px) {
    .header-img {
        display: none;
    }
}

在桌面上查看网站时，标题图像上方通常有空白区域。即使移动图像没有出现，似乎白色空间仍然存在。

如何确保标题图像与页面顶部之间始终没有任何间隙。

谢谢

Answer 1

您在custom-css中有以下媒体查询：

@media screen and (min-width: 75em) {
  .site {
    max-width: 1153px;
    margin: 400px auto;
    padding: 54px 108px;
  }
}

400px页边距负责将您的标题图片推送到页面下方。只需将其删除即可确保页眉位于页面顶部。

或者，如果您希望将保证金保留在底部，则可以使用margin: 0 auto 400px;的速记保证金，但删除顶部的结尾。

请注意，您还有54px的填充。如果您希望刷新在页面顶部，您也可以删除填充，或使用padding: 0 108px 54px;仅填充底部。

希望这有帮助！：）

Answer 2

.site - 班级有一个保证金。似乎这些样式在CSS的不同文件中重复（style.css和？缓存？custom-css）。

更改您的CSS，它应该符合预期：

@media screen and (min-width: 75em) {
    .site {
        max-width: 1153px;
        margin: 0 auto; /* change to this value or remove this line, it's already inherited from style.css:967 */
        padding: 54px 108px;
    }
}

Answer 3

感谢您的建议。

在附加CSS中我有

@media screen and (min-width: 75em) {
  .site {
    max-width: 1153px;
    margin: 400px auto;
    padding: 54px 108px;
  }
}

我现在已将其更改为

@media screen and (min-width: 75em) {
  .site {
    max-width: 1153px;
    margin: -50px auto;
    padding: 54px 108px;
  }
}

无论浏览器大小如何，都可以减少标题图像上方的空白区域

3 个答案: