Having an issue with the text overlay on my image, especially on mobile (small/xs) screens where the play button and title are extending beyond the image due to long paragraph text. Which bootstrap class should I adjust to fix this issue? I was expecting the image height to adapt to longer text, but it seems like it's not working as intended.
https://i.sstatic.net/wl3FX.png
html {
font-size: 18px;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
h1, .h1 {
font-size: 3.815rem;
}
h2, .h2 {
font-size: 2.441rem;
}
h3, .h3 {
font-size: 1.563rem;
}
h4, .h4 {
font-size: 1.25rem;
}
.product-video-section .product-video-container {
position: relative;
}
.product-video-section .product-video-container video {
height: auto;
vertical-align: middle;
width: 100%;
}
.product-video-section .product-video-container #product-video-button {
color: #d4272e;
}
.product-video-section .product-video-container .product-video {
display: none;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap {
text-decoration: none;
background-color: #fff;
border: 1px solid #d4272e;
display: inline-block;
border-radius: 50%;
width: 3.5rem;
height: 3.5rem;
color: #d4272e;
transition: all 300ms ease-in;
cursor: pointer;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap i {
font-size: 2rem;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap:hover {
background-color: #d4272e;
transition: all 300ms ease-in;
transform: scale(1.2);
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap:hover i {
color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script s...