Slider content not respecting {height: 100%;} on Mobile

Design help General
1

Hello everyone,

I need help with a slider not working as expected on mobile.

There are two slides with differing length of content. I would like all slides to be the same height and for the content to fill the available space. The following settings make it work on Desktop and Tablet. For whatever reason, it stops working on Mobile landscape and Mobile portrait.

<style>
.testimonial_slider {
height: 100%;
}

.testimonial_content {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}
</style>

I’m aware, that the native slider component can be tricky sometimes. I have respected all of the best practices to the best of my knowledge. I have tried everything imagineable and just cannot get it to work.

Is anyone able to take a quick look and give some guidance on this?
@PixelGeek @cyberdave @webdev

Thanks in advance! :v:t2:

Julian

Here is my site Read-Only: https://preview.webflow.com/preview/testimonial-slider-support?utm_medium=preview_link&utm_source=designer&utm_content=testimonial-slider-support&preview=05c5f622241c679f324cf06c9fa0d97f&workflow=preview

2

Is this a known bug or am I missing something very obvious here? I could really use a second pair of eyes.