react-responsive-carousel has unwanted white space below itself in mobile view

Question

I am using react-responsive-carousel and when I switch to mobile view, there is a bunch of white space below. I have tried everything I can think of to remove this including body { overflow-x: hidden }. When looking in the dev tools, is appears to be the ul.slider.animated .

Displaying white space below image carousel

Here is a codesandbox with my issue reproduced.

Answer 1

Update:

I've just had a look through your example and it's not the same issue I had, so my answer below doesn't apply to this particular question.

Regarding your actual question, I think this is more an issue of responsiveness in general as opposed to anything specific to react-responsive-carousel. The reason for the whitespace is because you've hardcoded the height of the carousel slide to be 90vh so there is only a small range of page sizes in which the aspect ratio of the carousel slide is compatible with that of the image leading to no whitespace below the image.

Here's my solution, although it means the footer is no longer fixed at the bottom.

1. Remove min-height: 100vh; from .page-container in styles.css
2. Remove height: 90vh; from .carousel .slide in carousel.css
3. Remove .carousel .previous { height: 90vh; } from the media query at the bottom of carousel.css.

This will no longer restrain the carousel to a fixed height and will remove the whitespace by allowing the footer to always join the bottom of the carousel. If you do really want the footer to be at the bottom, then another possible option is setting position: fixed; in footer.css and using portrait images when you switch to mobile mode. But again, you'll have to mess around with scaling and aspect ratios though not to the same extent as with only landscape images.

Old (and irrelevant) answer:

I had a similar issue and what worked for me was setting the showThumbs prop to false like so:

<Carousel showThumbs={false} />

For extra info, the bit you're looking for in the dev tools is the following:

<div class="carousel-root">
    <div class="carousel carousel-slider">...</div>
    <div class="carousel">
        <div class="thumbs-wrapper axis-vertical">...</div>
    </div>
<div>

That <div class="carousel carousel-slider"> is the main bit where your content sits and the <div class="thumbs-wrapper axis-vertical"> is probably for a row of thumbnails. Setting showThumbs={false} removes that second div.