Change the Height of the Slider on Home Page
Latest update: February 18, 2020 | Reading time: 1 to 2 minutesThe 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