I want to create a responsive product card with flex-box and flex-wrapper using min-width and max-width. However, the min and max isn't working with flex-wrap.
The flex-wrapper does wrap it but the width remains fix and it's not responsive like how I want it to be.
Here's the code I've written:
.product-container{
display: flex;
gap: 1rem;
padding: 1rem;
flex-wrap: wrap;
}
.product-wrapper{
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
width: 100%;
min-width: 10rem;
max-width: 15rem;
}
.product-wrapper a{
text-decoration: none;
}
.product{
width: 100%;
}
.product img{
width: 100%;
}
.price{
display: flex;
gap: 1rem;
}
<div >
<div >
<a href="#">
<div >
<img src="images/product.jpg" alt="">
<h2>Product Name</h2>
<div >
<p>$ 22</p>
<p>$ 9</p>
</div>
</div>
</a>
</div>
<div >
<a href="#">
<div >
<img src="images/product.jpg" alt="">
<h2>Product Name</h2>
<div >
<p>$ 22</p>
<p>$ 9</p>
</div>
</div>
</a>
</div><div >
<a href="#">
<div >
<img src="images/product.jpg" alt="">
<h2>Product Name</h2>
<div >
<p>$ 22</p>
<p>$ 9</p>
</div>
</div>
</a>
</div>
</div>
CodePudding user response:
Remove the width:100%;
:
.product-container{
display: flex;
gap: 1rem;
padding: 1rem;
flex-wrap: wrap;
}
.product-wrapper{
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
min-width: 10rem;
max-width: 15rem;
}
.product-wrapper a{
text-decoration: none;
}
.product{
width: 100%;
}
.product img{
width: 100%;
}
.price{
display: flex;
gap: 1rem;
}
<div >
<div >
<a href="#">
<div >
<img src="images/product.jpg" alt="">
<h2>Product Name</h2>
<div >
<p>$ 22</p>
<p>$ 9</p>
</div>
</div>
</a>
</div>
<div >
<a href="#">
<div >
<img src="images/product.jpg" alt="">
<h2>Product Nameee</h2>
<div >
<p>$ 22</p>
<p>$ 9</p>
</div>
</div>
</a>
</div><div >
<a href="#">
<div >
<img src="images/product.jpg" alt="">
<h2>Product Nameeeee</h2>
<div >
<p>$ 22</p>
<p>$ 9</p>
</div>
</div>
</a>
</div>
</div>
CodePudding user response:
.product-container {
display: flex;
gap: 1rem;
padding: 1rem;
flex-wrap: wrap;
}
.product-wrapper {
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
min-width: 10rem;
max-width: 15rem;
}
.product-wrapper a {
text-decoration: none;
}
.product {
width: 100%;
}
.product img {
width: 100%;
}
.price {
display: flex;
gap: 1rem;
}
<div >
<div >
<a href="#">
<div >
<img src="images/product.jpg" alt="">
<h2>Product Name</h2>
<div >
<p>$ 22</p>
<p>$ 9</p>
</div>
</div>
</a>
</div>
<div >
<a href="#">
<div >
<img src="images/product.jpg" alt="">
<h2>Product Name</h2>
<div >
<p>$ 22</p>
<p>$ 9</p>
</div>
</div>
</a>
</div>
<div >
<a href="#">
<div >
<img src="images/product.jpg" alt="">
<h2>Product Name</h2>
<div >
<p>$ 22</p>
<p>$ 9</p>
</div>
</div>
</a>
</div>
</div>