I'm trying to recreate the image container from this website here using flex-box:
The 'Best Sellers' section is what I'm working on at the moment. I can't figure out how to make the image container become a slider/ carousel only in mobile/ tablet view while maintaining the size of the image cards.
I appreciate all suggestions!
Here's a quick mockup of the section:
.best-seller {
/* overflow: auto;
white-space: nowrap; */
}
.product-title {
position: relative;
border-bottom: 1px solid lightgray;
}
.product-title h2 {
font-size: 2.8rem;
padding: 3rem 3.75rem;
letter-spacing: 1px;
}
.product-list {
display: flex;
border-bottom: 1px solid lightgray;
}
.product-list > * {
flex: 1;
}
.product-card {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border-left: 1px solid lightgray;
border-right: 1px solid lightgray;
}
.card {
height: 100%;
width: 100%;
position: relative;
}
.card a img {
height: 100%;
width: 100%;
object-fit: cover;
}
.product-card__title {
height: 100%;
padding: 1.5rem 1.2rem;
}
.product-card__title p {
color: gray;
font-weight: 300;
}
.bottom-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all .3s ease;
height: 100%;
object-fit: cover;
}
.bottom-img:hover {
opacity: 1;
cursor: pointer;
}
.product-option {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
padding: 0 15px;
}
.product-option__swatch {
display: flex;
height: 20px;
width: 20px;
}
.product-option__swatch img {
margin-right: 10px;
}
.product-option__swatch img:hover {
cursor: pointer;
}
.selected {
border: 1px solid black;
border-radius: 50px;
padding: 2px;
}
.product-option__bag {
cursor: pointer;
} <section class="best-seller">
<div class="product-title">
<h2>Best Sellers</h2>
</div>
<div class="product-list">
<div class="product-card">
<div class="card">
<img class="bottom-img" src="Asset/img/Ramverk_26L_Edit_720x.webp" alt="">
<div class="product-card__title">
<h4>The Ramverk 26L Backpack</h4>
<p>$219</p>
</div>
<a href="#">
<img class="top-img" src="Asset/img/TheRamverk26LBackpack__1080x.webp" alt="Backpack">
</a>
</div>
<div class="product-option">
<div class="product-option__swatch swatch">
<img src="Asset/img/swatch-bennified-1.webp" alt="" class="selected" >
<img src="Asset/img/swatch-gneiss.webp" alt="">
<img src="Asset/img/swatch-black-out.webp" alt="">
</div>
<div class="product-option__bag">
<img src="Asset/img/Db-bag_icon.svg" alt="">
</div>
</div>
</div>
<div class="product-card">
<div class="card">
<img class="bottom-img" src="Asset/img/AEra_16L.webp" alt="">
<div class="product-card__title">
<h4>The Æra 16L Backpack</h4>
<p>$159</p>
</div>
<a href="">
<img class="top-img" src="Asset/img/TheAEra16LBackpack_1080x.webp" alt="Backpack">
</a>
</div>
<div class="product-option">
<div class="product-option__swatch">
<img src="Asset/img/swatch-black-out.webp" alt="" class="selected" >
<img src="Asset/img/swatch-cloud-grey.webp" alt="">
<img src="Asset/img/swatch-sunbleached-red.webp" alt="">
<img src="Asset/img/swatch-marcelo-2-0.webp" alt="">
<img src="Asset/img/swatch-gneiss.webp" alt="">
</div>
<div class="product-option__bag">
<img src="Asset/img/Db-bag_icon.svg" alt="">
</div>
</div>
</div>
<div class="product-card">
<div class="card">
<img class="bottom-img" src="Asset/img/AEra_40L.webp" alt="">
<div class="product-card__title">
<h4>The Æra 40L Weekend Bag</h4>
<p>$199</p>
</div>
<a href="">
<img class="top-img" src="Asset/img/Marcelo_Weekend Bag_1080x.webp" alt="Backpack">
</a>
</div>
<div class="product-option">
<div class="product-option__swatch">
<img src="Asset/img/swatch-black-out.webp" alt="" class="selected">
<img src="Asset/img/swatch-gneiss.webp" alt="">
<img src="Asset/img/swatch-black-out.webp" alt="">
<img src="Asset/img/swatch-bennified-3-0.webp" alt="">
</div>
<div class="product-option__bag">
<img src="Asset/img/Db-bag_icon.svg" alt="">
</div>
</div>
</div>
<div class="product-card">
<div class="card">
<img class="bottom-img" src="Asset/img/TheStrom30LBackpack_Cover-Orange_1080x.webp" alt="">
<div class="product-card__title">
<h4>The Strøm 30L Backpack</h4>
<p>$199</p>
</div>
<a href="">
<img class="top-img" src="Asset/img/TheStrom30LBackpack-3_Orange_1080x.webp" alt="Backpack">
</a>
</div>
<div class="product-option">
<div class="product-option__swatch">
<img src="Asset/img/swatch-midnight-sun.webp" alt="" class="selected">
<img src="Asset/img/swatch-marcelo-2-0.webp" alt="">
<img src="Asset/img/swatch-camo-3-0.webp" alt="">
<img src="Asset/img/swatch-fog-blue.webp" alt="">
<img src="Asset/img/swatch-sunbleached-red.webp" alt="">
</div>
<div class="product-option__bag">
<img src="Asset/img/Db-bag_icon.svg" alt="">
</div>
</div>
</div>
</div>
</section>