Getting the Slider container to reduce height on the iPad

Firstly, read this @media snippet which will explain what you need to do.

If not clear, come back with a site link and we’ll help.

As always, much thanks for your help. I am afraid I do not understand the @media snippet, thus my attempts to use it have failed. The site is https://www.kbla.com and the Slider container spacing looks great on a desktop computer, but on the iPad in vertical mode the Slider container does not contract in size even though the slider images do.

https://www.kbla.com/wp-content/uploads/Capture-1.jpg
is how the spacing looks on the iPad and
https://www.kbla.com/wp-content/uploads/Capture-2.jpg
is the goal.
Thanks

You need to take the CSS that you have already written that works on the desktop, namely:

#customizr-slider.carousel .item {
    height: 375px;
    line-height: 375px;
    min-height: 375px;
}

and wrap it in a media query for devices smaller than 980px (say). So it will become:

@media (max-width: 979px) {
    #customizr-slider.carousel .item {
        height: 375px;
        line-height: 375px;
        min-height: 375px;
    }
}

Then change those figures significantly downwards to remove the extra space you’ve added on smaller screens.

You need to do this for all the sizes you want to change. Here is a full set of the ones used in Customizr. Pick the ones you want to change and use only those (you need to replace “ADD YOUR CSS” with valid CSS).

@media (min-width: 1200px) {ADD YOUR CSS}
@media (max-width: 1200px) {ADD YOUR CSS}
@media (min-width: 980px) {ADD YOUR CSS}
@media (max-width: 979px) {ADD YOUR CSS}
@media (min-width: 768px) and (max-width: 979px) {ADD YOUR CSS}
@media (max-width: 767px) {ADD YOUR CSS}
@media (min-width: 481px) and (max-width: 767px) {ADD YOUR CSS}
@media (max-width: 480px) {ADD YOUR CSS}
@media (max-width: 320px) {ADD YOUR CSS}

The brain trust comes through again. Thanks to rdellconsulting and ElectricFeet. Marked resolved.