Div won't resize vertically in slideshow with CSS queries

Question

I'm working on this page and trying to get the slideshow to display correctly at tablet and mobile widths with media queries. However, all of the slider container elements are setting their height to 590px and this is creating a large gap beneath the slider and its content. I don't belive any of the elements have a fixed height set, but I have used some max-height:590px here and there. Any thoughts on how to get rid of that gap and force the containers to resize correctly?

Slider uses Cycle2.

Some HTML code

<div id="slider" class="cycle-slideshow" data-cycle-pager="#adv-custom-pager" data-cycle-slides="> div" data-cycle-timeout="7000">

<div class="singleSlide">
  <!-- content goes in here -->
</div>

And some CSS that I think is important:

#homeslider {
    height: auto;
}
#homeslider, #slider img {
    width: 100%;
    height: auto;
}
#homeslider {
    width: 1090px;
    margin: 0px auto;
    max-height: 590px;
}

For reference, this slideshow is the expected behavior.

ETA: Added some of the code that I think is important?

Answer 1

In your .slidercaption you have a top:-200px which is causing the issue. Unlike margin, elements with position:relative won't physically move when you set a top or left style. That means the occupied space for that element will still remain on that position.

So to fix that, remove top: -200px and replace with margin-top: -200px instead.

From this:

.slidercaption {
  position: relative;
  top: -200px;
}

To this:

.slidercaption {
  margin-top: -200px
}

Take note, in your css there's a margin:0 set in that element. Make sure your update will override that existing style.

Update:

A far better solution is to use position:absolute instead, since having a negative margin or position is more likely to get an issue with that huge value.

So...

From:

.slidercaption {
  position: relative;
  top: -200px;
}

To:

.slidercaption {
  position: absolute;
  bottom:0;
}

Then what was causing the below elements to go up is because of this:

#sliderNav {
  margin-top: -190px;
}

Change that to:

#sliderNav {
  position: absolute;
  bottom: 168px;
  z-index: 99;
  width: 100%;
  margin: 0;
}

When you came to a point where you are using large negative values, you can use position:absolute instead which is very helpful and less likely to have some issues if used properly.