Thumbnail carousel, huge gap between main slider and thumbnails

Question

Please see the link below

Just Another Simple jQuery Image Slider Plugin - smSlider

Have a look at the demo and resize the browser.

In mobile and tablet size you can see a huge space between the main slider and thumbnails. I tried to fix it by changing this part of js file

var $smSliderInner = $smSlider.children('ul').addClass(options.innerBlock);
$smSliderInner.css({
  'height': smSlideHeight,
  'overflow': 'hidden',
  'position': 'relative',
  'width': '100%'
});

For example setting height: auto or position: absolute, but I had no success. Is there any solution to solve this problem?

Answer 1

The slider is missing some responsive styles to look nice on mobile devices. Have a look at the below screenshot. If you change the height of #full-page_slider, you will be able to make the slider look decent on those too.

Using various media queries you can then change the height depending on the screensize. You cannot set it to auto as then the element's height will collapse to 0.

Here are some example queries you can use.

// Media works when the width is below 480px
@media all and (max-width: 480px) {
  #full-page_slider { height: 280px; }
}

// Media works when the width is below 700px
@media all and (max-width: 700px) {
  #full-page_slider { height: 480px; }
}

Answer 2

You can try using CSS3 Media Queries.
Here is sample code you can try:

@media screen and (max-width: 980px){
    .sm_slide img{
        max-width: unset;
    }
}

When the user's screen is less than or equal to 980px, the browser changes the max-width of .sm_slide img to remove the gap between the main slider and the thumbnails