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.
- Remove
min-height: 100vh;
from .page-container
in styles.css
- Remove
height: 90vh;
from .carousel .slide
in carousel.css
- 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.