How can I make this overlay responsive without using a media query? - media-queries

Question

I'm attempting to make this hover text overlay responsive on almost all devices, at least on regular screens "small, medium, and large," but I'm failing. Is this due to position absolute? I tried media queries, and they only worked on 40% of the screens, not all of them. Is there a way to avoid using media queries? I'm new to coding, so please forgive me if my question is silly.
.clients {
position: relative;
padding: 0px;
padding-left: 7px;
padding-right: 7px;
}
.client-container {
position: relative;
width: 100%;
overflow: hidden;
}
.client-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 0;
visibility: hidden;
z-index: 0;
}
.client-container:hover::after {
opacity: 1;
visibility: visible;
transition: opacity 350ms;
}
.product-desc {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
text-align: left;
padding: 10em 1.39em 0.2em;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
z-index: 1;
text-transform: uppercase;
font-size: 11px;
font-family: 'Inter', sans-serif;
font-weight: 200;
letter-spacing: 1.64px;
}
.client-container:hover .product-desc {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.product-desc2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
text-align: right;
padding: 6.5em 0.389em 0.2em;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
z-index: 1;
text-transform: capitalize;
font-size: 21px;
font-family: 'Inter', sans-serif;
font-weight:bold;
letter-spacing: 0.5px;
margin-left: 6.5px;
}
.client-container:hover .product-desc2 {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.brand-img {
display: block;
max-width: 100%;
height: auto;
transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-webkit-transition: all 1.6s ease;
-moz-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
transition: all 1.2s ease;
}
.clients:hover .brand-img {
cursor: pointer;
transform: scale(1.6);
-ms-transform: scale(1.6);
-moz-transform: scale(1.6);
-webkit-transform: scale(1.3);
-o-transform: scale(1.6);
}
#media only screen and (max-device-width : 1440px){
.product-desc {
padding: 23em 0.60em 0.2em;
font-size: 11px;
font-family: 'Inter', sans-serif;
font-weight:200;
margin-left: 4px;
}
.product-desc2 {
padding: 14.5em 0.60em 0.2em;
font-size: 21px;
font-family: 'Inter', sans-serif;
font-weight: bold;
margin-left: -1px;
}
}
#media only screen and (max-device-width : 1440px){
.product-desc {
padding: 23em 0.60em 0.2em;
font-size: 11px;
font-family: 'Inter', sans-serif;
font-weight:200;
margin-left: 4px;
}
.product-desc2 {
padding: 14.5em 0.60em 0.2em;
font-size: 21px;
font-family: 'Inter', sans-serif;
font-weight: bold;
margin-left: -1px;
}
}
#media only screen and (min-device-width: 834px) and (max-device-width: 1112px) {
.product-desc {
padding: 24em 0.60em 0.2em;
font-size: 8px;
font-family: 'Inter', sans-serif;
font-weight:200;
margin-left: 1px;
}
.product-desc2 {
padding: 18.1em 0.60em 0.2em;
font-size: 13px;
font-family: 'Inter', sans-serif;
font-weight: bold;
margin-left: -2px;
}
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1023px) {
.product-desc {
padding: 27em 0.60em 0.2em;
font-size: 7px;
font-family: 'Inter', sans-serif;
font-weight:200;
margin-left: 1px;
}
.product-desc2 {
padding: 17.5em 0.60em 0.2em;
font-size: 13px;
font-family: 'Inter', sans-serif;
font-weight: bold;
margin-left: -2px;
}
}
#media only screen and (max-width : 600px) {
#work .product-desc {
display: none;
}
#work .product-desc2 {
padding:15em 0.40em 0.2em;
font-size: 10px;
font-family: 'Inter', sans-serif;
font-weight: bold;
}
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container text-center">
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>text1</P>
</div>
<div class="product-desc2">
<p>text2</p>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>text1</P>
</div>
<div class="product-desc2">
<p>text2</p>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>text1</P>
</div>
<div class="product-desc2">
<p>text2</p>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>text1</P>
</div>
<div class="product-desc2">
<p>text2</p>
</div>
</figure>
</a>
</div>
</div>
</body>

Answer 1

There is no need for padding because you have top bottom left right in your css just give percentages also you are using bootstrap 5 which means no need for media query in your case you are using it on mobile screens to hide the class also just to let you know in botstrap 5 you can hide classes by using Display property
.clients {
position: relative;
padding: 0px;
padding-left: 7px;
padding-right: 7px;
}
.client-container {
position: relative;
width: 100%;
overflow: hidden;
}
.client-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 0;
visibility: hidden;
z-index: 0;
}
.client-container:hover::after {
opacity: 1;
visibility: visible;
transition: opacity 350ms;
}
.product-desc {
position: absolute;
top: 70%;
right: 0;
bottom: 0;
left: 5%;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
text-align: left;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
z-index: 1;
text-transform: uppercase;
font-size: 11px;
font-family: 'Inter', sans-serif;
font-weight: 200;
letter-spacing: 1.64px;
}
.client-container:hover .product-desc {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.product-desc2 {
position: absolute;
top: 89%;
right: 0;
bottom: -5%;
left: 3%;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
text-align: right;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
z-index: 1;
text-transform: capitalize;
font-size: 21px;
font-family: 'Inter', sans-serif;
font-weight:bold;
letter-spacing: 0.5px;
margin-left: 6.5px;
}
.client-container:hover .product-desc2 {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.brand-img {
display: block;
max-width: 100%;
height: auto;
transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-webkit-transition: all 1.6s ease;
-moz-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
transition: all 1.2s ease;
}
.clients:hover .brand-img {
cursor: pointer;
transform: scale(1.6);
-ms-transform: scale(1.6);
-moz-transform: scale(1.6);
-webkit-transform: scale(1.3);
-o-transform: scale(1.6);
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container text-center">
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>Lorem Ipsum is simply dummy text</P>
</div>
<div class="product-desc2">
<p>Lorem Ipsum</p>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>Lorem Ipsum is simply dummy text of the printing </P>
</div>
<div class="product-desc2">
<p>Lorem Ipsum</p>
</div>
</figure>
</a>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>Lorem Ipsum is simply dummy text of the printing </P>
</div>
<div class="product-desc2">
<p>Lorem Ipsum</p>
</div>
</figure>
</a>
</div>
</figure>
</a>
</div>
<div class="clients col-6 col-md-4 col-lg-3">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp6JFn9KC_PokcX-Bz2MOjxLAElZw1foLisjHPEjuUad4cKkiFbJY6f5hwYWHIvaB6Y68&usqp=CAU" alt="Logo">
<div class="product-desc">
<P>Lorem Ipsum is simply dummy text of the printing </P>
</div>
<div class="product-desc2">
<p>Lorem Ipsum</p>
</div>
</figure>
</a>
</div>
</figure>
</a>
</div>
</div>
</body>