Develop Reference

GTM Invalid HTML, CSS, or JavaScript found in template

I am using GTM's "Custom HTML Tag" option with the my below code but it is giving me the following error when I try to publish it: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't support or recognize certain tag attributes. I have tested my code, and no error prompts show up in the console either. It is a standard bootstrap modal:
function myFunction() {
var copyText = document.getElementById("myInput");
navigator.clipboard.writeText(copyText.innerHTML);
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copied: " + copyText.innerHTML;
}
function outFunc() {
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copy";
}
$("#myModal").modal();
body {
font-family: 'Varela Round', sans-serif
}
.modal-login {
color: #636363;
max-width: 850px;
width: 100%;
margin: 30px auto;
background-image: none!important
}
.modal-login .modal-content {
padding: 20px;
min-height: 586px;
border-radius: 5px;
margin: 1rem;
background-color: #eaebeb;
background-image: url(https://media-services.dcm-inc.com/couponsites/static/resources/img/festival.png);
background-size: 100%;
background-repeat: no-repeat
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
margin-top: 130px
}
.modal-login img {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 40%
}
.modal-login .form-group {
position: relative
}
.modal-login h4 {
text-align: center;
font-size: 20px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px
}
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%
}
#media screen and (max-width:600px) {
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%
}
}
.modal-login .form-control:focus {
border-color: #fcda7b
}
.modal-login .btn,
.modal-login .form-control {
min-height: 40px;
border-radius: 30px
}
.modal-login .hint-text {
text-align: center;
padding-top: 10px
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px
}
.button,
.modal-login .btn {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%);
border: none;
line-height: normal
}
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%
}
#media screen and (max-width:600px) {
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
}
.modal-login .custom-social {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%
}
.modal-login .btn:focus,
.modal-login .btn:hover {
opacity: .7
}
.trigger-btn {
display: inline-block;
margin: 100px auto
}
.contest-social {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.modal-login .fa:hover {
opacity: .7
}
.modal-login .contest-social-facebook {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-twitter {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-youtube {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-instagram {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flexC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
-webkit-flex-flow: row wrap
}
.modal-title img {
margin: 1rem;
max-width: 100px;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ddd
}
.modal-title p {
font-size: 20px;
font-weight: 500;
max-width: 300px;
color: #000
}
.ccme {
color: #fd5c88
}
.codelinkbox {
margin: 0;
position: relative;
text-align: center;
width: auto;
position: relative
}
.codeValue {
border: 2px dashed currentColor;
font-size: 28px;
height: 50px;
line-height: 48px;
padding: 0 15px;
border-right: none;
border-radius: 0;
display: inline-block;
white-space: nowrap;
cursor: pointer;
border-radius: 6px 0 0 6px!important;
font-weight: 700;
color: #000
}
.buttonBtn.copy {
background-color: currentColor;
cursor: pointer;
font-size: 16px;
height: 50px;
line-height: 42px;
margin: 0;
padding: 0 15px;
position: relative;
text-transform: capitalize;
overflow: hidden;
min-width: 0;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
border-radius: 0 6px 6px 0
}
.buttonBtn.copy:hover {
background: #6ba62c;
color: #fff
}
.copy span {
color: #fff
}
.m1 {
margin: 1rem auto
}
.txtC {
text-align: center
}
.buttonBtn {
position: relative;
cursor: pointer;
font-size: 15px;
left: 0;
top: 0;
margin: 0;
height: 54px;
min-width: 180px;
border: 0;
outline: 0;
padding: 0 15px;
border-radius: 10px;
line-height: 54px
}
.arrRight {
color: #fff;
font-weight: 700
}
.arrRight:after {
content: '\2192';
display: inline-block;
color: #fff
}
.emailIcon {
width: 24px;
max-width: 24px;
margin: 0 5px
}
.termsto {
margin: 3rem 0
}
.sendemail {
font-size: 13px;
margin: 10px 0
}
#media all and (max-width:540px) {
.modal-title {
text-align: center
}
.modal-login .modal-header {
margin-top: 40px
}
}
.testtip {
position: relative;
display: inline-block;
}
.testtip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.testtip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.testtip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto%7CVarela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login border">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<div class="flexC">
<img src="https://res.cloudinary.com/csnetworkco/image/upload/c_scale,h_150,w_150/csnimages/Noon_568012.jpg" alt="Noon Discount Code" title="Noon Discount Code" width="150" height="150" loading="lazy">
<p>Up To 70% Off Sale + 10% Off Using Noon Coupon Code</p>
</div>
</div>
<div class="modal-body">
<div class="codelinkbox flexC m1">
<div id="myInput" class="codeValue">YB26</div>
<div class="testtip">
<button class="buttonBtn copy ccme" onclick="myFunction()" onmouseout="outFunc()"><span id="myTooltip">Copy</span></button>
</div>
</div>
</div>
<div class="row termsto">
<div class="col-sm-8">
<p><strong>Things to remember:</strong></p>
<ul>
<li>Don't forget to paste the code in the checkout during the purchase</li>
<li>Get 10% Off for New Customers & 5% Off for Returning Customers. </li>
<li>Code Usage: 2 times per customer.</li>
<li>Always contact our customer support team if there is any issues</li>
<li>You can always share the code</li>
</ul>
</div>
<div class="col-sm-4 txtC ">
<button class="buttonBtn ccme button" id=""><span class="arrRight">VISIT SITE </span></button>
</div>
</div>
</div>
</div>
</div>
</div>

I found what the issue was, in the img tag I was adding an attribute loading="lazy" due to which the invalid HTML CSS or JS error was being thrown
They really need to highlight what part of the code is the problem
I removed the above mentioned attribute and am now able to publish the tag

Text Responsive Issue in css

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>Read More</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>Read More</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's not necessary to do this cause 220px is not a phone for humans maybe for cats. but you can use this simply In your CSS.
* { word-break: break-all; }
* { word-break: break-all; }
#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>Read More</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>Read More</div>
</div>
</div>
</div>
</div>
</section>

spacing issue in html/css

I have the following code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: flex;
gap: 360px;
/* This seems to cause the problem */
width: 100%;
margin: 0 auto;
padding: 20px;
justify-content: center;
overflow: hidden;
}
.square {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
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);
}
.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);
}
.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;
}
.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;
}
.square .square-details {
padding: 20px 30px 30px;
}
.square1 .square-details1 {
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;
}
.parent-div {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
#media screen and (max-width: 480px) {
.parent-div {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
.square1 {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
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;
}
}
#media screen and (max-width: 480px) {
.square1 .square-image1 img {
height: 230px !important;
border: 5px solid #555;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="row1">
<div class="container1">
<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>Read More</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>Read More</div>
</div>
</div>
</div>
</div>
</section>
I have the above code embedded in a website and so on my end, the output is looking like this on 50% zoom out on page
This is exactly what I want, but when I zoom in to 100%, then my output is looking like this:
See how the end corners are not aligned anymore? If you still cannot see the problem, then refer to the following picture:
See how the corners circled in orange do not align anymore? How would I fix that? I know the gap: 360px is causing the issue but how would I change it so that whatever the user zooms out to, the alignment of the corners never changes? Any suggestions?

Instead of using gap property use margin-left and margin-right for the space between the cards and check the below cards padding to align corner in same line
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.square {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
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;
margin-left: auto;
margin-right: auto;
}
.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);
}
.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);
}
.square .square-image img {
width: 100%;
height: auto;
object-fit: cover;
}
.square1 .square-image1 img {
width: 100%;
height: auto;
object-fit: cover;
}
.square1 .square-image1,
.square .square-image{
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
height: 220px;
overflow:hidden;
}
.square .square-details {
padding: 20px 30px 30px;
}
.square1 .square-details1 {
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;
}
.parent-div {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
#media screen and (max-width: 480px) {
.parent-div {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
.square1 {
position: relative;
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
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;
margin-left: auto;
margin-right: auto;
}
#media screen and (max-width: 480px) {
.square1 {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
}
}
#media screen and (max-width: 480px) {
.square1 .square-image1 img {
height: 230px !important;
border: 5px solid #555;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="row1">
<div class="container1">
<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>Read More</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>Read More</div>
</div>
</div>
</div>
</div>
</section>
now you can adjust the container width with media query to adjust according to screen size to get exact result as below card.
Also fixed the overflowing image in the card issue

How to make text fit inside a box? html/css

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>Read More</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>Read More</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?

Apply overflow-wrap:anywhere to .square .square-details:
#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;
overflow-wrap:anywhere;
}
.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-details {
padding: 20px 30px 30px;
overflow-wrap:wrap;
}
.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>Read More</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>Read More</div>
</div>
</div>
</div>
</div>
</section>

You can set your title's word-break CSS property to break-word, but notice that it will unpredictably break words wherever the browser sees fit. By default, words do not get broken, so your text will overflow on such small screens.

How to make these div elements responsive?

I have a marketplace type of page im working on but I can't seem to get the products(div elements) to be responsive. It looks terrible when resizing the window or looking at it on mobile. What am I doing wrong here?
<div class="productlayout">
<div class="products">
<div id="col-1">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title1">Official Mens T-Shirt</h3>
<h4 class="price1">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-2">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title2">Mens Tank</h3>
<h4 class="price2">$29.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-3">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title3">Mens Sweatpants</h3>
<h4 class="price3">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
</div>
</div>
CSS
.productlayout {
display: flex;
flex-direction: row;
height: 500px;
}
.products {
display: flex;
flex-grow: 1;
background-color: #c7c4c4;
margin: 0px 40px;
justify-content: space-around;
padding: 30px 0px;
}
#col-1 {
background: #1d1d1d;
width: 320px;
order: 1;
box-shadow: 0px 0px 1px 1px #000;
}
#col-1 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
#col-2 {
background: #1d1d1d;
width: 320px;
order: 2;
box-shadow: 0px 0px 1px 1px #000;
}
#col-2 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
#col-3 {
background: #1d1d1d;
width: 320px;
order: 3;
box-shadow: 0px 0px 1px 1px #000;
}
#col-3 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
.lineunderproduct {
width: 75%;
margin: 0 auto;
margin-top: 20px;
}
.title1 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.title2 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.title3 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.price1 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
.price2 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
.price3 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
/* Add to Cart Buttons */
.btn {
border: none;
font-family: 'Droid Serif', serif;
font-size: 20px;
color: #1d1d1d;
background: none;
cursor: pointer;
padding: 20px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: none;
outline: none;
position: relative;
box-shadow: 0px 0px 0px 3px #D4AF37;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5 {
background: #fff;
color: #1d1d1d;
height: 40px;
min-width: 260px;
line-height: 30px;
font-size: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-5:active {
background: #9053a9;
top: 2px;
}
.btn-5 span {
display: inline-block;
letter-spacing: 0.1px;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
.btn-5:before {
position: absolute;
height: 100%;
width: 100%;
line-height: 1.5;
font-size: 180%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5:active:before {
color: #703b87;
}
/* Button 5a */
.btn-5a:hover span {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}
.btn-5a:before {
left: 0;
top: -100%;
}
.btn-5a:hover:before {
top: 0;
/* Hover backgorund change background-color: #308014; */
}
#media (max-width: 800px) {
.products {
flex-direction: column;
}

You need to add media queries for your design to be responsive and also always try to use % to provide width for responsive design
an example of media query for screen smaller that 768 px will be
#media only screen and (max-width: 768px) {
.products {
display:block;
}
#col-1 {width: 100%;}
#col-2 {width: 100%;}
#col-3 {width: 100%;}
}
Check the below example on expanded and small view to see the impact.
.productlayout {
display: flex;
flex-direction: row;
height: 500px;
}
.products {
display: flex;
flex-grow: 1;
background-color: #c7c4c4;
margin: 0px 40px;
justify-content: space-around;
padding: 30px 0px;
}
#col-1 {
background: #1d1d1d;
width: 33%;
order: 1;
box-shadow: 0px 0px 1px 1px #000;
}
#col-2 {
background: #1d1d1d;
width: 33%;
order: 2;
box-shadow: 0px 0px 1px 1px #000;
}
#col-3 {
background: #1d1d1d;
width: 33%;
order: 2;
box-shadow: 0px 0px 1px 1px #000;
}
#media only screen and (max-width: 768px) {
.products {
display:block;
}
#col-1 {width: 100%;}
#col-2 {width: 100%;}
#col-3 {width: 100%;}
}
You need to write media queries for different view ports to make your design responsive.
for smaller screen you can make add this css.
<div class="productlayout">
<div class="products">
<div id="col-1">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title1">Official Mens T-Shirt</h3>
<h4 class="price1">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-2">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title2">Mens Tank</h3>
<h4 class="price2">$29.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-3">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title3">Mens Sweatpants</h3>
<h4 class="price3">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
</div>
</div>