cards responsive for smallaer screens img being cut - css

Question

i have a card that no matter what i did to it i could not make it a perfect responsive for smaller screens some of the images will cut off i need to make it very small for that then the medum screen will be ruined i dont know what to do here is my codes
and here is some images of how it looks like and what will happen when it is on small screen
big screen small screen like you see in both sides the it cuts the image can anyone help me with this ?
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
h1{
font-size: 2.5rem;
font-family: 'Montserrat';
font-weight: normal;
color: #444;
text-align: center;
margin: 2rem 0;
}
.wrapper{
width: 100%;
margin: 0 auto;
max-width: max-width: 80rem;;
}
.cols{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.col{
width: calc(25% - 2rem);
margin: 1rem;
cursor: pointer;
}
.container{
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.front,
.back{
word-wrap: break-word;
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
background-size: 400px 400px;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
min-height: 400px;
min-width: 200px;
height: auto;
border-radius: 10px;
color: #fff;
font-size: 0.8rem;
text-overflow: ellipsis;
}
.back{
background-color: #000;
background: -webkit-linear-gradient(45deg, #cedce7 0%,#596a72 100%);
background: -o-linear-gradient(45deg, #cedce7 0%,#596a72 100%);
background: linear-gradient(45deg, #cedce7 0%,#596a72 100%);
}
.front:after{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: '';
display: block;
opacity: .3;
background-color: #000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
}
.container:hover .front,
.container:hover .back{
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.inner{
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
}
.container .back{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container .front{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container:hover .back{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container:hover .front{
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.front .inner p{
font-size: 2rem;
margin-bottom: 2rem;
position: relative;
}
.front .inner p:after{
content: '';
width: 4rem;
height: 2px;
position: absolute;
background: #C6D4DF;
display: block;
left: 0;
right: 0;
margin: 0 auto;
bottom: -.75rem;
}
.front .inner span{
color: rgba(255,255,255,0.7);
font-family: 'Montserrat';
font-weight: 300;
}
#media screen and (max-width: 64rem){
.col{
width: calc(33.333333% - 2rem);
}
}
#media screen and (max-width: 48rem){
.col{
width: calc(50% - 2rem);
}
}
#media screen and (max-width: 32rem){
.col{
width: 100%;
margin: 0 0 2rem 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="col-sm-6 col-md-3 col-lg-3 p-2 col-6" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<a href="viewmovie.php?series=<?php echo $id; ?>&episode=<?php echo $id_ep ?>">
<div class="front" style="background-image: url(../../src/upload/posts/<?php echo $img; ?>)" >
<div class="inner">
<h5><?php echo "$name"; ?></h5>
<h6>خوله‌ک <?php echo "$time"; ?> </h6>
<p></p>
<h6>IMDb: <?php echo $rate ?></h6>
<h6 class="fa fa-eye"> <?php echo "$views"; ?> </h6>
<span> </span>
</div>
</div>
<div class="back">
<div class="inner">
<p><?php echo "$description"; ?></p>
</div>
</div>
</a>
</div>
<center><a target="_blank" href= "<?php echo $trailer2 ?>"> <button type="button" class="btn btn-danger btn-sm m-2"><span class="fa fa-play">ترایله‌ر</button></span></a></center>
</div>

Answer 1

/* import font */
#import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
background: #f1f1f1;
font-family: "Raleway", sans-serif;
text-align: center;
}
header{
margin: 0;
}
a, li{
list-style: none;
text-decoration: none;
}
nav{
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
background: white;
width: 100%;
}
.nav-link + .nav-link{
margin-left: 30px;
}
nav ul li + nav ul li{
margin-right: 30px;
}
nav ul li{
display: inline-block;
}
.products{
padding: 30px 50px 100px 50px ;
}
.card{
max-width: 20%;
background: #ffffff;
padding: 10px;
border-radius: 5px;
text-align: right; display: inline-block;
margin-left: 20px;
margin-top: 30px;
animation: rotation 1s ease-in-out ;
}
#keyframes rotation {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(359deg);
}
}
.card-body div{
margin-top: 10px;
}
.card-footer button{
margin-top: 20px;
background: #fb727c;
border-radius: 5px;
outline: none;
border: none;
color: white;
margin-bottom: 5px;
}
.product-name{
text-align: left;
font-size: 18px;
font-family: "Raleway Medium", sans-serif;
}
.product-price{
text-align: left;
font-size: 22px;
font-family: "Raleway Medium", sans-serif;
}
button{
cursor: pointer;
font-family: "Raleway SemiBold", sans-serif;
font-size: 16px;
padding: 8px 25px 8px 25px;
transition: 0.2s ease-in-out;
}
button:hover{
box-shadow: 0 5px 10px rgba(239, 60, 73, 0.5);
transition: 0.2s ease-in-out;
background: rgb(239, 60, 73);
}
img{
max-width: 100%;
}
/* media queries */
#media (max-width: 768px) {
.products{
padding: 30px 20px 30px 20px;
}
.card{
max-width: 40%;
display: inline-block;
}
.card {
margin-left: 0;
margin-top: 30px;
}
}
<body>
<header>
<nav>
<ul>
<li class="nav-link"><a class="nav-item" href="">Home</a></li>
<li class="nav-link"><a class="nav-item" href="">About</a></li>
<li class="nav-link"><a class="nav-item" href="">Service</a></li>
<li class="nav-link"><a class="nav-item" href="">Contact</a></li>
</ul>
</nav>
</header>
<main>
<div class="products">
<div class="card">
<div class="card-header">
<div class="product-img">
<img src="https://www.nowfoods.com/sites/default/files/styles/home_site_sections/public/beauty-health-catagory-homepage_0.png?itok=wSmkgxgp" alt="">
</div>
</div>
<div class="card-body">
<div class="product-details">
<div class="product-name">Short denim dungarees</div>
</div>
<div class="product-price">
₹1,900
</div>
</div>
<div class="card-footer">
<button>Add to Cart</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="product-img">
<img src="https://www.nowfoods.com/sites/default/files/styles/home_site_sections/public/beauty-health-catagory-homepage_0.png?itok=wSmkgxgp" alt="">
</div>
</div>
<div class="card-body">
<div class="product-details">
<div class="product-name">Short denim dungarees</div>
</div>
<div class="product-price">
₹1,900
</div>
</div>
<div class="card-footer">
<button>Add to Cart</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="product-img">
<img src="https://www.nowfoods.com/sites/default/files/styles/home_site_sections/public/beauty-health-catagory-homepage_0.png?itok=wSmkgxgp" alt="">
</div>
</div>
<div class="card-body">
<div class="product-details">
<div class="product-name">Short denim dungarees</div>
</div>
<div class="product-price">
₹1,900
</div>
</div>
<div class="card-footer">
<button>Add to Cart</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="product-img">
<img src="https://www.nowfoods.com/sites/default/files/styles/home_site_sections/public/beauty-health-catagory-homepage_0.png?itok=wSmkgxgp" alt="">
</div>
</div>
<div class="card-body">
<div class="product-details">
<div class="product-name">Short denim dungarees</div>
</div>
<div class="product-price">
₹1,900
</div>
</div>
<div class="card-footer">
<button>Add to Cart</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="product-img">
<img src="https://www.nowfoods.com/sites/default/files/styles/home_site_sections/public/beauty-health-catagory-homepage_0.png?itok=wSmkgxgp" alt="">
</div>
</div>
<div class="card-body">
<div class="product-details">
<div class="product-name">Short denim dungarees</div>
</div>
<div class="product-price">
₹1,900
</div>
</div>
<div class="card-footer">
<button>Add to Cart</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="product-img">
<img src="https://www.nowfoods.com/sites/default/files/styles/home_site_sections/public/beauty-health-catagory-homepage_0.png?itok=wSmkgxgp" alt="">
</div>
</div>
<div class="card-body">
<div class="product-details">
<div class="product-name">Short denim dungarees</div>
</div>
<div class="product-price">
₹1,900
</div>
</div>
<div class="card-footer">
<button>Add to Cart</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="product-img">
<img src="https://www.nowfoods.com/sites/default/files/styles/home_site_sections/public/beauty-health-catagory-homepage_0.png?itok=wSmkgxgp" alt="">
</div>
</div>
<div class="card-body">
<div class="product-details">
<div class="product-name">Short denim dungarees</div>
</div>
<div class="product-price">
₹1,900
</div>
</div>
<div class="card-footer">
<button>Add to Cart</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="product-img">
<img src="https://www.nowfoods.com/sites/default/files/styles/home_site_sections/public/beauty-health-catagory-homepage_0.png?itok=wSmkgxgp" alt="">
</div>
</div>
<div class="card-body">
<div class="product-details">
<div class="product-name">Short denim dungarees</div>
</div>
<div class="product-price">
₹1,900
</div>
</div>
<div class="card-footer">
<button>Add to Cart</button>
</div>
</div>
</div>
</main>
</body>