For some reason my text keeps overflowing from my DIV, I don't know if it's because it's a container Flex
but I can't find how to make it adapt, I tried it in every way and I can't do it.
<a href="#">
<div class="image image1">
<div class="margin">
<p class="tittle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, voluptate?</p>
<p class="hidden">Vamos a comprar pan</p>
</div>
</div>
.general-info {
margin: 50px;
display: inline-block;
width: 100%;
padding: 0px;
white-space: nowrap;
text-align: center;
}
.image {
position: relative;
background-size: cover;
background-repeat: no-repeat;
height: 270px;
max-height: 500px;
width: 50%;
min-width: 300px;
padding: 10px 11px 12px 10px;
max-width: 500px;
display: inline-block;
margin: 0px 5px 0px 5px;
object-fit: cover;
}
.image::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(206, 83, 77, .6);
transition: 2s;
opacity: 0;
}
.image:hover::before {
opacity: 1;
transition: .6s;
z-index: 7;
}
.image1 {
background-image: url("../../../public/img/general-info/girasoles.jpg");
}
.image2 {
background-image: url("../../../public/img/general-info/bosque.jpg");
}
.margin {
position: inherit;
display: flex;
align-items: flex-end;
height: 100%;
border: 2px solid rgb(255, 255, 255);
z-index: 10;
word-break: break-all;
}
.margin .tittle {
position: relative;
color: white;
width: 300px;
bottom: 5px;
left: 5px;
font-size: 30px;
z-index: 10;
transition: .6s;
text-transform: uppercase;
word-break: break-all;
}
.image:hover .margin .tittle {
bottom: 25px;
transition: .6s;
}
.image .margin .hidden {
position: absolute;
left: 7px;
bottom: -10px;
color: white;
opacity: 0;
transition: .6s;
}
.image:hover .margin .hidden {
opacity: 1;
transition: .6s;
z-index: 7;
bottom: 5px;
transition: .6;
}
I need a second line of text to be created but not to go out of the box but to keep growing upwards as in the second image
In your css rule
.general-info
change thewhite-space
toinherit
or directly remove it, since it doesn't seem like you're using that attribute.