How to increase the size of header slider

Hello,

I’ve added css to my website to reduce the size of the menu background(on mobile view). I want to keep the menu background at this reduced size. However I need your help to increase the height of the header slider to 300pixels. Can you please help me out with this.

I’ve attached a link to my website for your reference

Hi @kharisblank

I was wondering if you could help me out with this ?

Thank you in advance

Hi,

Thank you for rasing a new topic for this. And I am sorry for the delay in response. I really appreciate your patient.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
      .header-slider {
        height: 700px !important;
      }
      .header-slider img.mobile-slide {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

Let me know how it goes.

Regards,
Kharis
aThemes Support

Hello @kharisblank

Thank you for your reply.

I added this code to my website however it didn’t make any change at all.

Should I delete the previously added code suggested by you and add this instead?

Hoping to hear from you soon :grin:

Hi,

You don’t need to do so.

Try replacing this code I suggested previously

    @media only screen and (max-width: 767px) {
      .header-slider {
        height: 700px !important;
      }
      .header-slider img.mobile-slide {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

with:

    @media only screen and (max-width: 767px) {
      .sydney-hero-area,  
      .header-slider,
      .header-slider .slide-item {
        height: 700px !important;
      }
      .header-slider img.mobile-slide {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }  
    }

To change the height to meet your requirement, edit this line:

   height: 700px !important;

I hope that helps.

Regards,
Kharis
aThemes Support

Hello @kharisblank

Thank you for your reply.

I added this code but the header slider is not responsive now. The sides of the slider are getting cropped out and only the height is increasing.

The headline under the header slider also has unnecessary spacing after adding this code nor has the hamburger menu come into position.

Please let me know what can I do to fix this

Thank you :grin:

That is considered as normal for the slider container height gets increased. The code above sets the slide image to cover the entire container otherwise there will be an empty space as the height gets increased.

Seems likely you’ll need to rethinking the image height before uploading for responsive image slider is currently a bit narrower.

I am sorry, I didn’t get it. Can I ask you to take a screenshot to it, put some descriptive annotations, and share it here?

Regards,
Kharis
aThemes Support

Hi @kharisblank

So there’s no way to increase the height of the header image without the image getting cropped from the sides?

I have uploaded the screenshot. In this you can see the hamburger menu is not aligned with the logo

It is possible only if you prepare another image with your preferred height. And reupload it to replace the existing one.

Seems likely it is not related with the current topic that is talking about slider height. Can you raise a separate topic for this?

Regards,
Kharis.
aThemes Support

Hello @kharisblank

Thank you for your reply.

I’ll upload a picture with the required height in the slider so should I keep the code you had previously suggested in the additional css.

 @media only screen and (max-width: 767px) {
      .sydney-hero-area,  
      .header-slider,
      .header-slider .slide-item {
        height: 700px !important;
      }
      .header-slider img.mobile-slide {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }  
    }

This was the code suggested by you^^

Hi,

Seems likely it would be better to use a separate image to show only on smaller screen. To do so, you’d try this custom jQuery code solution:

Regards,
Kharis
aThemes Support