Hero Header Image Size on Mobile

Dear Support Team,

I am using Sydney Pro theme on a website and cannot find a solution for adjusting the Header Image size on mobile.
I already searched the Forum and found different solutions but they did not work at all:

    @media only screen and (max-width:1024px) {
      .sydney-hero-area .header-image {
        height: 240px !important;
    		background: center !important
    }
    }

    @media only screen and (max-width:370px) {
      .sydney-hero-area .header-image {
        height: 180px !important;
      }
    }   

With this Code the Header container adjusts to the defined height, but the (background-) Image does not. The Image is adjusting proportional (“contain” not “cover”).

Any solution for this problem?

Regards

Hello there,

By default the header image will adjust itself on 1024px screen resolution and below. Meaning that the image is responsive on smaller device – you’d need to add extra code. If it doesn’t behave like so, please share a link to your site, so I can have a look.

Regards,
Kharis

Hi,

that’s exactly how it behaves. But I’d like the header image, to cover the background of the hero header image container, that I would like to define a height for on mobile devices.
As i already said, I can define the container height. With the following code I also can define the height of the image itself, but then it gets stretched in height:

.header-inner {
  height: 300px;
}

That can’t be such a big deal for you great guys.

Regards

Hello there,

Try this code:

@media only screen and (max-width: 1024px) {
  .sydney-hero-area .header-image {
    height: 270px !important;
  }
  .sydney-hero-area .header-image img.header-inner {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

Regards,
Kharis

That’s it!

Great support. Thank you. I was searching the forum for a long time and already belived, that there is nor solution for this, without a lot of coding.

Regards

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis