Reply To: White space under header when responsive

[Tom]

Background images are super tricky on mobile, as it all has to do with aspect ratio.

Your header is much taller on mobile because of the padding, so the aspect ratio is off.

You can set your size to cover only on mobile or add a mobile specific image with a better aspect ratio:

@media (max-width: 768px) {
    .site-header {
        background-size: cover;
        background-image: url('CUSTOM URL TO MOBILE IMAGE WITH CORRECT ASPECT RATIO');
    }
}