HTML CSS responsive Card - html

Question

I am making a card with header in HTML and CSS. Appreciate your advice on how can I make it responsive. I tried so many ways but I can't seem to have it worked. Do I need to change some code so that the webpage will be responsive?
.section1{
margin-right: 0;
}
.section2{
width:95%;
height: 2.2rem;
background-color: #182035;
margin-right: 0;
margin-top: 7rem;
margin-left: 2.6rem;
text-align: center;
}
.section3{
width:95%;
height: 2.2rem;
background-color: #182035;
margin-right: 0;
margin-top: 30rem;
margin-left: 2.6rem;
text-align: center;
}
h3{
position: relative;
z-index: 40;
color:#ecb445;
margin-left: 3rem;
font-family: Coldiac;
}
.container{
background-color:#ecb445;
border-radius: 0.5rem;
padding-bottom: 1rem;
padding-top: 1rem;
}
/*CARD*/
.card {
width: 20rem;
height: 20rem;
background-color: #fff;
border:0.2rem solid #182035;
overflow: hidden;
position: relative;
display: flex;
cursor: pointer;
justify-content: center;
transition: all ease 0.4s
}
.card img {
width:22rem;
height:auto;
margin-top: -2.5rem;
transition: all ease 0.4s;
}
.card:hover img {
margin-top: 1rem;
}
.card .content {
width: 20.5rem;
height:17rem;
background: #fff;
position: absolute;
bottom: -70%;
margin-left: -8px;
transition: all ease 0.5s;
border-radius: 1rem;
box-shadow: 0px -3px 4px rgba(10, 10, 10, 0.09)
}
.card .content .category {
font-size: 17px;
font-weight: 600;
}
.card .content .price {
font-size: 17px;
font-weight: 500;
color: #000;
}
.card .content p {
font-weight: 500;
font-size: 12px
}
.card:hover .content {
bottom: 0%
}
.buttons button {
border-radius: 1px;
margin-bottom: 10px;
transition: all ease 0.3s
}
.content {
padding: 1rem 1rem;
font-size: 2rem;
}
.category{
padding-bottom: 1rem;
}
#btn2{
background-color:transparent;
border-color: #df4648;
color:#df4648;
}
#btn2:hover{
background-color:#df4648;
color: #fff;
}
<div class="container-fluid">
<div class="section2">
<h3> Paper Stock </h3>
<div class="container mt-4 mb-3">
<div class="row g-2">
<div class="col-md-4 col-sm-12 d-flex justify-content-center">
<div class="card">
<div class="text-center"> <img src="images/glossy.jpeg" class="img-fluid" width="200" /> </div>
<div class="content">
<div class="d-flex justify-content-between align-items-center"> <span class="category">Glossy
Paper</span> </div>
<p> <b> Description: </b>a semi-gloss finish, unlike glossy paper. Matte paper also produces a
high-quality print albeit loses the vibrant effect that Gloss paper has.
<br><br> <b> Size: </b> 8.5x11/A4 <br> <b> Black & White: </b> ₱1.50/page <br> <b> Slightly Colored:
</b> ₱5.00/ page <br> <b> Full Colored: </b> ₱8.00/ page
</p>
<div class="buttons d-flex justify-content-center"> <button class="btn btn-outline-primary mr-1"
id="btn2">Print Now </button></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 d-flex justify-content-center">
<div class="card">
<div class="text-center"> <img src="images/matte.jpg" class="img-fluid" width="200" /> </div>
<div class="content">
<div class="d-flex justify-content-between align-items-center"> <span class="category">Matte
Paper</span></div>
<p> <b> Description: </b>a smooth-coated paper designed to present an ultra-smooth and shiny appearance
<br><br>
<b> Size: </b> 8.5x11/A4 <br> <b> Black & White: </b> ₱1.50/page <br> <b> Slightly Colored: </b>
₱5.00/ page <br> <b> Full Colored: </b> ₱8.00/ page
</p>
<div class="buttons d-flex justify-content-center"> <button class="btn btn-outline-primary mr-1"
id="btn2">Print Now </button></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 d-flex justify-content-center">
<div class="card">
<div class="text-center"> <img src="images/textured.jpg" class="img-fluid" width="200" /> </div>
<div class="content">
<div class="d-flex justify-content-between align-items-center"> <span class="category">Textured
Paper</span></div>
<p> <b> Description: </b>has four different kinds; smooth, embossed, uncoated, and coated. Each of the
four kinds has their own unique appearance and texture.<br><br>
<b> Size: </b> 8.5x11/A4 <br> <b> Black & White: </b> ₱1.50/page <br> <b> Slightly Colored: </b>
₱5.00/ page <br> <b> Full Colored: </b> ₱8.00/ page
</p>
<div class="buttons d-flex justify-content-center"> <button class="btn btn-outline-primary mr-1"
id="btn2">Print Now</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section3">
<h3>Ink</h3>
<div class="container mt-4 mb-3">
<div class="row g-2">
<div class="col-md-4 col-sm-12 d-flex justify-content-center">
<div class="card">
<div class="text-center"> <img src="images/hpink.jpg" class="img-fluid" width="200"/> </div>
<div class="content">
<div class="d-flex justify-content-between align-items-center"> <span class="category">Hewlett Packard</span> </div>
<p> <b> Description: </b>Hewlett Packard, or HP, uses cartridges which are recycled. HP cartridges also has a reputation for being “ink-spill-free.” <br><br> <b> HP GT52 </b> <br> <b> Product Type: </b> Ink Cartridge <br> <b> Yield: </b> Standard-Yield <br> <b> Price: </b> ₱360.00 </p>
<div class="buttons d-flex justify-content-center"> <button class="btn btn-outline-primary mr-1" id="btn2">Buy Now </button></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 d-flex justify-content-center">
<div class="card">
<div class="text-center"> <img src="images/epsonink.png" class="img-fluid" width="200" /> </div>
<div class="content">
<div class="d-flex justify-content-between align-items-center"> <span class="category">Epson</span></div>
<p> <b> Description: </b>Although inks manufactured by Epson costs a lot, they provide quality, true-to-life, and sharp prints for businesses. <br><br>
<b> Epson 664 </b> <br> <b> Product Type: </b> Ink Cartridge <br> <b> Yield: </b> Standard-Yield <br> <b> Price: </b> ₱299.00</p>
<div class="buttons d-flex justify-content-center"> <button class="btn btn-outline-primary mr-1" id="btn2">Buy Now</button></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 d-flex justify-content-center">
<div class="card">
<div class="text-center"> <img src="images/canonink.png" class="img-fluid" width="200" /> </div>
<div class="content">
<div class="d-flex justify-content-between align-items-center"> <span class="category">Canon</span></div>
<p> <b> Description: </b>Canon inks has a history for having inks that blend well with other colors, they are sold at a fair price <br><br>
<b> Canon GT-790</b> <br> <b>Product Type: </b>Ink Cartridge<br> <b> Yield: </b> Standard-Yield <br> <b> Price: </b> ₱499.000 </p>
<div class="buttons d-flex justify-content-center"> <button class="btn btn-outline-primary mr-1" id="btn2">Buy Now</button></div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Take help from this code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.box {
width: 300px;
height: 250px;
color: blue;
border: 2px solid blue;
margin:3rem 3rem;
}
#box1 {
background-color: aqua;
}
#box2 {
background-color: rgb(229, 255, 0);
}
#box3 {
background-color: rgb(255, 0, 68);
}
#box4 {
background-color: rgb(255, 238, 0);
}
#box5 {
background-color: rgb(35, 57, 126);
}
#box6 {
background-color: rgb(25, 155, 43);
}
.container{
border:4px solid black;
display:flex;
flex-wrap: wrap;
padding:10px 10px;
}
</style>
<body>
<div class="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
</div>
<body>
</html>