php - Reducing White Space Above Your Header Image Regardless Of The Browser Size

Question

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

Answer 1

You have the following media query in custom-css:

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

The 400px margin is responsible for your header image being pushed so far down the page. Simply remove this to ensure that the header stays at the top of the page.

Alternatively, you can use the shorthand margin of margin: 0 auto 400px; if you would like to keep the margin at the bottom, but remove the marign at the top.

Note that you also have a padding of 54px. If you would like it flush up against the top of the page, you can remove the padding as well, or use padding: 0 108px 54px; to only pad the bottom.

Hope this helps! :)