I have the following code:
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.square1:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square1 .square-image1 img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square1 .square-details1 {
padding: 20px 30px 30px;
}
.square1 {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width: 480px) {
.square1 {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: 480px) {
.square1 .square-image1 img {
height: 230px !important;
border: 5px solid #555;
padding-left: 0;
padding-right: 0;
}
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
padding-left: 0;
padding-right: 0;
}
.square,
.square1 {
max-width: 460px;
width: 100%;
}
.h11 {
width: 100% !important;
}
}
.containerE {
--bs-gutter-x: 1.5rem;
width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 480px) {
.containerE {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: center;
overflow: hidden;
}
}<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container" style="display: flex; justify-content: space-between;">
<div class="containerE" style="display: flex; justify-content: space-between;">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div>
</div>
</div>
<div class="square1">
<div class="square-image1">
<img src="assets/img/Blog2.png">
</div>
<div class="square-details1">
<h3 class="h11">My Career Advice To You: Take These Steps...</h3>
<p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0>
<div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div>
</div>
</div>
</div>
</div>
</section>When you run the above code, open it on a new page, inspect it and view it on a 220 width screen, then you can see the text overflows outside the blog card.
I want to make the .h11 and p0 text to fit inside the blog card and not flow outside of it. I dont want to change the font size of both of them, but is there a way I can set the width to 100% so that the text doesn't overflow outside the blog card?
For some reason, the second blog card text is fine even on 220 width screen, but the first blog text is not. Any suggestions to make the .h11 and p0 text fit inside the blog card like the second blog card?
I even tried adding a media query and using width: 100% to .h11 but it did not work.
It also seems like when I set screen width size to 150px, then even the second blog's text flows outside the card. Is there a way to fix this?