Change height of slider section

Tyche
1

Hi! How can i change the height size of the slider section?
I don´t want to see the white space as it’s showed in the picture.
TIA.

2

Here you can better appreciate the issue.

3

Hey there,

I hope you are well today and thank you for your question.

Can you provide the URL to your website so we can have a look at the issue?

Best regards,
Support.

4

Hi! This project is still on a VM on my PC, so is not yet on the internet.
Can i do something else to show you the site?

5

Hello there,

I hope you are doing well today.

The height of the slider adjusts to the height of the image so you can try replacing the image with a larger image.

If that does not work, you can use the following CSS code to increase the slider height by going to Appearance > Customize > Additional CSS and pasting it there.


/*Slider height*/
.main-slider {
    position: relative;
    height: 1000px;
}

Best Regards,
Support

6

Great. I will try the code.
One more question. What is the recommended size of the images for the slider?
Thanks a lot.

7

Hi. I guess i figure it out.
I use images of different sizes. So, some images have more height than the others.
I will use images of the same size to avoid the white space between the slider images and the slider info section.
Thanks again.

8

Hello - How would I change the slider height on desktop? I tried adding in code below which makes the section larger, but the images I upload just stretch to fit that size. The images are auto-cropped when I load them …

section.main-slider img {
height: 600px;
}

Thanks,
Jamie

9

Hello @jtravis,

Try using the code provided earlier to change the slider height the code you are using directly affects the image size.

Best Regards,
Support

10

I tried that as well. That doesn’t seem to do anything. Here is my site:
http://www.vincaponiantiqueweapons.com/vincaponi/

Seems like i can get the section to stretch but it just stretches the images which are being auto-cropped.

Thanks,
Jamie

11

Hello @jtravis16,

Try using the following CSS code to change the slider image height:


/*Slider image height*/
.owl-carousel .owl-item img {
    height: 969px !important;
}

If you change the height it will distort the image because the width has to be 100% of the screen width.

Best Regards,
Support

12

Hello - That helped make the space larger, but the image is still being stretched. I tried removing and re-adding the image and it still auto-crops to 545px high.

My image is 2304 × 1704 but the slider keeps cropping it to 1600x545. I need to find the code to change how it’s cropping it.