Header and distance to heading on mobile device

Hello

We use Sydney and have a static Image in header. Header height 290px under Customize > Header area > Media in page head. The image is of size 1945x450.

In mobile view the distance between the header image and heading on the page is very big and I wonder if i can decrease the distance in some way?

Under Customize > Additional CSS this is added previously:

@media only screen and (min-width: 992px) {
#masthead .col-md-4.col-sm-8.col-xs-12 {
width: 10%;
}

#masthead .col-md-8.col-sm-4.col-xs-12 {
    width: 90%;
}

}
@media only screen and (max-width:800px) {

.site-header img.site-logo {
max-height: 70px !important;
}

}
@media only screen and (max-width:1420px) {
.header-image {
height: 200px !important;
}

One more question. In mobile view on top of the pages there is blue band and logo displayed, and under this the menu.
Is there away to decrease the height of the in,our case, the blue band? I consider to remove the logo on the pages and display it as part of the menu bar, in Max Mega Menu that we use.

A copy of production site used for testing is here https://www.medvetande.nu. ID: hans PW: opera

We plan to upgrade to Sydney Pro as soon as possible to get WooCommerce support.

Kind regards,
Hans Abrahamsson

Hello Hans,

The header image should be responsive in smaller size. Please avoid making it fixed by adding this CSS code:

@media only screen and (max-width: 1420px) {
    .header-image {
        height: 200px !important;
    }
}

It’ll resulting empty spaces below the image as image height proportionally adapts with the screen size.

Regards,
Kharis

Hello Kharis,

Tha CSS code you suggest is alreday added to Additional CSS. I have also set the Header height to 600px and using an image 1920 * 600px, but it didn’t make the distance to the heading smaller.

Regards,
Hans

Hello Hans,

I am sorry I wrote you incorrectly, I meant you don’t need to have such this CSS code:

@media only screen and (max-width: 1420px) {
    .header-image {
        height: 200px !important;
    }
}

Because it’s causing you responsiveness issue.

Regards,
Kharis