Responsive carousel-caption with absolute position - Carousel slider bootstrap 4

0
votes

I have the carousel slider in Bootstrap and this is my carousel-caption.

<div class="carousel-caption"> <p class="mx-auto text-center">Sed eros orci, faucibus at ex mollis, luctus fringilla erat. Etiam vel nibh velit. Nulla mattis tortor vel orci elementum consectetur sit amet ultrices metus. Donec ac arcu sed justo maximus fringilla vel eu nulla. In vel vestibulum metus. Maecenas et nisl eget ante mattis fermentum. </p> </div>

I want text has a background cover width 100% but the size of text be 40% and when when the size in p change the height of carousel-caption change proportionally, with the text centered vertically and horizontally. I have the next CSS:

.carousel-caption {
  position: absolute;
  top: 50%;
  left:0;
  right:0;
  bottom: 0;
  transform: translateY(-32%);
  background: #000;
  text-align: center;
  padding-top: 5%;
  padding-bottom: 5%;
  max-height: 30vh;       
 }
 p {
  width: 40%;
 }

Thanks in advance for your help.

1
bootstrap-4

1 Answers

0
votes

This can happen because some tag p is reducing the size of the carousel because you are declaring "width: 40%" for all, not only for the one inside the carousel-caption. I suggest changing this:

p { width: 40%; }

For this:

.carousel-caption p { width: 40%; }

Another reason may be the size of your screen because you declare "max-height: 30vh" so the carousel-caption will have a height of 30% of your screen