无论浏览器大小如何，缩小标题图像上方的空白 [英] Reducing White Space Above Your Header Image Regardless Of The Browser Size

问题描述

我的网站是www.rosstheexplorer.com。

以下代码位于我的header.php中

 < img class =header-imgsrc =https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover - 光6-2.jpg> 
 
 
< img class =mobile-header-imgsrc =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; 
} 
} 
  

观看时，标题图片上通常会有空白在桌面上的网站。即使移动图像没有出现，几乎看起来好像白色空间仍然存在。

我如何确保标题图片和页面顶部之间没有任何间隙。

谢谢

解决方案

感谢您的建议。 p>

在额外的CSS中，我有

  @media screen和（min-width ：75em）{
 .site {
 max-width：1153px; 
 margin：400px auto; 
 padding：54px 108px; 
} 
} 
  

现在我已将其更改为

  @media screen and（min-width：75em）{
 .site {
 max-width：1153px; 
保证金：-50px auto; 
 padding：54px 108px; 
} 
} 
  

My website is www.rosstheexplorer.com.

The following code is in my 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">

The following code is in Additional CSS

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

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

There is usually white space above the header image when viewing the site on desktops. It almost seems as if the white space stays even when the mobile image does not appear.

How can I ensure that there is never any gap between the header image and the top of the page.

Thank you

解决方案

Thank you for your suggestions.

In Additional CSS I had

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

I have now changed it to

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

这篇关于无论浏览器大小如何，缩小标题图像上方的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！