Reduce the height of the Slider

3.1/3.2 code

/* START OF Reduce the height of the Slider */
#customizr-slider.carousel .item {
height:         400px;
min-height:     400px;
line-height:    400px;
}
/* END OF Reduce the height of the Slider */

Credit: @acub

You will need to make further adjustments for different viewports, the following has been suggested by Rocco (@d4z_c0nf):

Let’s assume we’re defining a new height of 400px.
For a slider height of 500px (based on some ratios defined by @nikeo)
– @media max-width 1200px
385px => ratio = 385/500 = 0.77 so width should be 400*0.77 = 308px
– @media max-width 979px
309px => ratio = 309/500 = 0.618, so 400*0.618 = 247px
– @media max-width 767px
308px => ratio = 308/500 = 0.616, so 400*0.616 = 246px
– @media max-width 480px
190px => ratio = 190/500 = 0.38, so 400*0.38 = 152px
– @ media max-width 320px
140px => ratio = 140/500 = 0.28, so 400*0.28 = 112px

/* START OF Reduce the height of the Slider */
@media (max-width: 1200px){
#customizr-slider.carousel .item {
height: 308px;
min-height: 308px;
line-height: 308px;
}
}
@media (max-width: 979px){
#customizr-slider.carousel .item {
height: 247px;
min-height: 247px;
line-height: 247px;
}
}
@media (max-width: 767px){
#customizr-slider.carousel .item {
height: 246px;
min-height: 246px;
line-height: 246px;
}
}

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

@media (max-width: 320px){
#customizr-slider.carousel .item {
height:         112px;
min-height:     112px;
line-height:    112px;
}
}
/* END OF Reduce the height of the Slider */

Credit: @d4z_c0nf