Bootstrap 4 card-Image-overlay text flowing out of image

I have this image with text overlayed, Not sure what causing it, but on mobile (small/xs)the play button and title is getting out of the image due the p text being long. what bootstrap class am i messing up to cause this issue? I thought the image height will adjust to take care of this issue when texts inside gets longer, is it the image?.

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>
&lt;script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="./Library/bower_components/slick-carousel/slick/slick.min.js"&gt;&lt;/script&gt;
&lt;script src="./index.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"&gt;&lt;/script&gt;


&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous"&gt;
&lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
&lt;link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" /&gt;
&lt;link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" /&gt;

&lt;link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"&gt;

&lt;link rel="stylesheet" type="text/css" href="./style/index.css"&gt;

</head>
<body>
    &lt;div class="product-video-section "&gt;
        &lt;div class="product-video-container card"&gt;
            &lt;img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1"&gt;
            &lt;div class="card-img-overlay  d-flex align-items-center product-video-texts text-dark" id=""&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-12"&gt;
                        &lt;div class="d-flex justify-content-end row"&gt;
                            &lt;div class="col-lg-6 col-sm-12"&gt;
                                &lt;h4 class="card-title "&gt;This is video&lt;/h4&gt;
                                &lt;p class="card-text "&gt;
                                    
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis! sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendissit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!!
                                
                                &lt;/p&gt;

                                &lt;div href="" class="play-btn-wrap d-flex justify-content-center" data-toggle="modal"
                                     data-target="#@videoTarget"&gt;
                                    &lt;i class="ion-ios-play product-video-button  align-self-center pl-1" id="" aria-hidden="true"&gt;&lt;/i&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

</body>
</html>

#html #css #css3 #bootstrap

What is GEEK

Buddha Community

Randy Rickards

1551151239

The reason this is happening is that the div.card-img-overlay has the following styles:

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
}

This means that as the content inside of that element gets larger (or the box itself gets smaller), the box will not expand to fit the content. This is a limitation of the Bootstrap card component, and you did nothing wrong.

Your have a couple options to fix this:

Limit the amount of content allowed to go inside of a card so that this never happens. To me, this is the only real solution. Based on my tests, a limit of 65 words, or roughly 675 characters seems to work across all media queries (using your current styles).

1b) Increase the height of the image. I’m not exactly sure if this would work, and you would need to coordinate this effort with my previous suggestion about limiting the text input.

Write Media queries to decrease the font size accordingly so that the text adjusts to fit when necessary. This is a tedious solution, but a solution nonetheless. However, no amount of styles can be written to accommodate any amount of text. You will need to still limit the amount of text which can go inside a card.
Use element queries to adjust the size of the text whenever the element gets too small. This is not much different than using CSS media queries.
Abandon the card component and just create a div with the image as a background. You can use the background-size css property to adjust how the image stretches and resizes as the element gets bigger or smaller.

Dev Express

1610107146

WHAT IS A TWITTER CARD - TYPES AND USES

The Twitter card is a facility provided by Twitter for its user to share their photos, videos, articles, blogs, and media in a more eye-catching way. The Twitter card is something that allows you to share your media beyond the limit of 280 characters, to some extent.

READ MORE

#twitter card #what is twitter card #types of twitter card #summary card #summary card with large image #player card

Samuel Tucker

1551149511

Bootstrap 4 card-Image-overlay text flowing out of image

I have this image with text overlayed, Not sure what causing it, but on mobile (small/xs)the play button and title is getting out of the image due the p text being long. what bootstrap class am i messing up to cause this issue? I thought the image height will adjust to take care of this issue when texts inside gets longer, is it the image?.

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>
&lt;script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="./Library/bower_components/slick-carousel/slick/slick.min.js"&gt;&lt;/script&gt;
&lt;script src="./index.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"&gt;&lt;/script&gt;


&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous"&gt;
&lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
&lt;link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" /&gt;
&lt;link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" /&gt;

&lt;link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"&gt;

&lt;link rel="stylesheet" type="text/css" href="./style/index.css"&gt;

</head>
<body>
    &lt;div class="product-video-section "&gt;
        &lt;div class="product-video-container card"&gt;
            &lt;img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1"&gt;
            &lt;div class="card-img-overlay  d-flex align-items-center product-video-texts text-dark" id=""&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-12"&gt;
                        &lt;div class="d-flex justify-content-end row"&gt;
                            &lt;div class="col-lg-6 col-sm-12"&gt;
                                &lt;h4 class="card-title "&gt;This is video&lt;/h4&gt;
                                &lt;p class="card-text "&gt;
                                    
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis! sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendissit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!!
                                
                                &lt;/p&gt;

                                &lt;div href="" class="play-btn-wrap d-flex justify-content-center" data-toggle="modal"
                                     data-target="#@videoTarget"&gt;
                                    &lt;i class="ion-ios-play product-video-button  align-self-center pl-1" id="" aria-hidden="true"&gt;&lt;/i&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

</body>
</html>

#html #css #css3 #bootstrap

I am Developer

1623294892

Laravel 8 Add Text Watermark on Image Example

Laravel 8/7/6 Image watermarking is the process of adding text information over the image. In this tutorial, you will learn how add text overly watermark on Image in laravel 8 apps.

And also you will learn how to resize images using the image intervention package before store images into database and folder in laravel apps.

Note that, image watermarking is the process of adding text information to the image; It may display copyright information, any important information on the images. It is also known as digital signature, which is used to verify the authenticity of the content.

And this tutorial aims to guide you on how to add the watermarking text to the image in laravel apps using the PHP image intervention library.