The height of the slider is responsively adjusted according to the window width. You can change the height with a few lines of CSS. For better results, you should adjust the height for any screen size. We have created a simple workaround for this.

Simply go to Theme Options > Advanced > Scripts & Styles and add the following lines to the Custom CSS field; then Save changes.

.stretchy_wrapper.ratio_slider {
 padding-bottom: 320px !important;
}
@media only screen and (min-width: 480px) {
 .stretchy_wrapper.ratio_slider {
 padding-bottom: 400px !important;
 }
}
@media only screen and (min-width: 768px) {
 .stretchy_wrapper.ratio_slider {
 padding-bottom: 640px !important;
 }
}
@media only screen and (min-width: 1900px) {
 .stretchy_wrapper.ratio_slider {
 padding-bottom: 35% !important;
 }
}

The padding-bottom property sets the height of the slider. You can set the values you need on padding-bottom to fine-tune the height of the slider.

VALID FOR ALL VERSIONS OF HEALTHFLEX