Slider not responsive and creates extra height into the section below it

Question

I have been working on websites that use the Bodega theme from Select themes and the Select Slider keeps creating weird issues on scroll and in responsive view.

The website with issues is this one: http://185.56.86.90/~onetoncr/friedmanpr.com/. And in mobile view, there is a weird expanding white section beneath the slider that gets larger as you scroll.

https://postimg.cc/bG3PbXyS https://postimg.cc/jw2b482g

This seems to be the code at hand with this slider:

<div id="qode-home-slider" data-q_responsive_graphic_coefficients="1,1,0.8,0.7,0.6,0.5,0.4" data-q_responsive_title_coefficients="1,1,0.8,0.7,0.6,0.5,0.4" data-q_responsive_subtitle_coefficients="1,1,0.8,0.7,0.6,0.5,0.4" data-q_responsive_text_coefficients="1,1,0.8,0.7,0.6,0.5,0.4" data-q_responsive_button_coefficients="1,1,0.8,0.7,0.6,0.5,0.4" class="carousel slide full_screen q_auto_start header_not_transparent" data-slide_animation="6000" data-parallax="yes" style="height: 887px;"><div class="qode_slider_preloader" style="height: 1077px; display: none;">

I want the slider to just not interact at all with the section below it.

Answer 1

#qode-home-slider has height that is too much for mobile prortrait display. You can add CSS rule with media query that will fix this. Something like:

@media only screen and (max-width: 768px) { 
   #qode-home-slider{ 
       height: 340px; 
   } 
}

Please note that height values may change as your code is changing.