[FIXED] why css bottom is not working in carousel?

Issue

I am using this plugin to create carousel https://www.npmjs.com/package/react-responsive-carousel

but my pills show over the image .see current output (background red). pills are over the image

here is my code https://codesandbox.io/s/react-responsive-carousel-forked-8c3x7s?file=/src/index.js

Expected output

I tried like this

.control-dots {
  background-color: red;
  position: absolute;
  bottom: 0;
}

still not working. Expected to move pills bottom of image not over the image.

Solution

You need to add padding-bottom to the container element:

.carousel.carousel-slider {
  padding-bottom: 30px;
}

.control-dots {
  background-color: red;
}

https://codesandbox.io/s/react-responsive-carousel-forked-ztfpeu?file=/src/index.css

Answered By - Fralle
Answer Checked By - - Marilyn (ReactFix Volunteer)