I’m creating the front end of the Search page of an e-commerce site.
I want to reduce the number of items displayed on the screen in steps as the screen gets smaller, like Amazon.
I also want to fix the extra white space taken up when the first line has 6 items while the second line only has 4 items.
How can I solve the problem ??
I’m using [email protected].
Here is what I wanna do
- At full screen:1920px I want to display 6 items per line
- 1575px >=: display 5 items per line and hide 1
- 1270px >=: display 4 on a line and hide 2 on a line
- 970px >=: Display 3 per line and hide 3
- 670px >=: Display 2 per line and hide 4 per line
- <= 670px: display one per line and hide five
I tried to do this with CSS but it did not work.
This is the CSS Code
@media (min-width: 1250px) {
.col#card-row {
flex: 0 0 25%; /* Show 4 items in a row */
max-width: 25%;
}
}
@media (max-width: 1249px) {
.col#card-row {
display: none; /* Hide all items by default */
}
}
@media (max-width: 780px) {
.col#card-row:nth-child(-n+2) {
display: block; /* Show the first 2 items */
}
.col#card-row:nth-child(n+3) {
display: none; /* Hide the rest of the items */
}
}
@media (max-width: 500px) {
.col#card-row:first-child {
display: block; /* Show only the first item */
}
.col#card-row:nth-child(n+2) {
display: none; /* Hide the rest of the items */
}
}
This is the HTML Code
<div class="container-fluid">
{{-- item 1 --}}
<div class="row g-3 mb-5" id="card-row">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="product image">
<div class="card-body">
<h1 class="h3">Product Name</h1>
<h2 class="h4">$50</h2>
<a href="" class="text-muted text-decoration-none">Shop Name</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="product image">
<div class="card-body">
<h1 class="h3">Product Name</h1>
<h2 class="h4">$50</h2>
<a href="" class="text-muted text-decoration-none">Shop Name</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="product image">
<div class="card-body">
<h1 class="h3">Product Name</h1>
<h2 class="h4">$50</h2>
<a href="" class="text-muted text-decoration-none">Shop Name</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="product image">
<div class="card-body">
<h1 class="h3">Product Name</h1>
<h2 class="h4">$50</h2>
<a href="" class="text-muted text-decoration-none">Shop Name</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="product image">
<div class="card-body">
<h1 class="h3">Product Name</h1>
<h2 class="h4">$50</h2>
<a href="" class="text-muted text-decoration-none">Shop Name</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="product image">
<div class="card-body">
<h1 class="h3">Product Name</h1>
<h2 class="h4">$50</h2>
<a href="" class="text-muted text-decoration-none">Shop Name</a>
</div>
</div>
</div>
</div>
{{-- item 2 --}}
<div class="row g-3 mb-5" id="card-row">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="product image">
<div class="card-body">
<h1 class="h3">Product Name</h1>
<h2 class="h4">$50</h2>
<a href="" class="text-muted text-decoration-none">Shop Name</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="product image">
<div class="card-body">
<h1 class="h3">Product Name</h1>
<h2 class="h4">$50</h2>
<a href="" class="text-muted text-decoration-none">Shop Name</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="product image">
<div class="card-body">
<h1 class="h3">Product Name</h1>
<h2 class="h4">$50</h2>
<a href="" class="text-muted text-decoration-none">Shop Name</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="product image">
<div class="card-body">
<h1 class="h3">Product Name</h1>
<h2 class="h4">$50</h2>
<a href="" class="text-muted text-decoration-none">Shop Name</a>
</div>
</div>
</div>
</div>
</div>
2
Answers
I should've read bootstrap document before I asked.
This is my solution.
Based on the example that you provide.
I think this will override the bootstrap features.
Why dont you use all the classes of bootstrap to obtain that layout.
So that in every break points it will hide one item.
Try this code:
Hope it helps.