when carousel caption is too long it falls off image, how to fix?

Question

Here's my css code and HTML. Whenever a line in my carousel-caption becomes too long it falls off the image. When I minimize the window, however, the caption eventually moves into the image creating the effect I really want. Wondering how I can contain it to the image? Thanks for the help - because I am relatively new to CSS/BOOTSTRAP styling.

* {
  margin: 0;
  padding: 0;
}


a {
  background-color: transparent !important;
  color: white;
}

img {
  max-width: 100%;
  max-height: 80vh;
  margin: auto;
}

.carousel-caption {
  padding: 30px;
  background-color:transparent !important;
  position: absolute;

}

.picsum-img-wrapper {
   padding-bottom: 20px;
  padding-top: 20px;
  background-color: #8E9AAF ;
   color: white;
   font-size: 20px;
   font-family: orpheuspro, serif;
   font-style: normal; 
   font-weight: 600 !important; 
   display: grid;
    height: 100%;
}

h3 {
  background-color: transparent !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ngb-carousel [showNavigationArrows]="true" 
[showNavigationIndicators]="true"
interval="12000"
[keyboard]="true"
[pauseOnHover]="true"
[wrap]="true"
[activeId]="'secondSlide'"
 [interval]="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img src="../../assets/img/actual.png" alt="Angular Carousel 1">
      <div class="carousel-caption">
        <h3>Title Goes Here</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.. To read on click <a routerLink="/blog/1">here</a></p>
      </div>
  </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img src="../../assets/img/image0.jpeg" alt="Angular Carousel 2">
      <div class="carousel-caption">
        <h3>Title Goes Here</h3>
        <p>Consectetur tortor volutpat pretium... To read on click <a routerLink="/blog/2">here</a></p>
    </div>
  </div>
  </ng-template>
</ngb-carousel>

when carousel caption is too long it falls off image, how to fix?

0 Answers0