<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12" *ngFor="let card of cards">
This specific div is responsible for containing the various cards that are visible on the webpage. Depending on the screen size, a different number of cards will be displayed - 4 for XL, 3 for large, 2 for medium, and 1 for small screens.
However, when transitioning from one screen size to another, particularly between extra-large and large or from large to medium, there is an issue with overlapping cards horizontally on the page.
To address this problem, I utilized the @media selector in CSS and set the background color to red as a test. Here's how it was implemented:
@media (min-width: 1200px) and (max-width: 1450px) {
background-color: red; // Testing application
}
@media (min-width: 990px) and (max-width: 1050px) {
background-color: red;
}My inquiry revolves around how to adjust the number of cards displayed in each @media query. In the first @media tag, I aim to display only 3 cards instead of 4, while in the second @media tag, my goal is to show 2 cards rather than 3.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e5e8e8f3f4f3f5e6f7c7b3a9b1a9b5">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
<!-- insert card markup here -->
</div>
</div>
</div>