Currently working on the design of the Search page for an online store. I aim to adjust the number of items displayed on the screen gradually as the screen size changes, similar to Amazon's layout. Additionally, I'm looking to rectify the excess white space issue that occurs when the first line contains 6 items and the second line only has 4.
Any solutions or suggestions? You can reach me at [email protected].
The objective is as follows
- On a full screen (1920px): Display 6 items per row
- At 1575px & above: Show 5 items per row and hide 1
- For 1270px & above: Present 4 items per row and hide 2
- When the width is 970px & above: Exhibit 3 items per row and hide 3
- If the width is 670px & above: Showcase 2 items per row and hide 4
- When the screen size is less than or equal to 670px: Display one item per row and hide five
I attempted to achieve this using CSS but encountered difficulties.
Here is the CSS Code
@media (min-width: 1250px) {
.col#card-row {
flex: 0 0 25%; /* Display 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 remaining items */
}
}
@media (max-width: 500px) {
.col#card-row:first-child {
display: block; /* Only show 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>>
<!-- Repeat above structure for other items -->
</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>>
<!-- Repeat above structure for other items -->
</div>
</div>