I am currently in the process of developing an e-commerce section, which includes an aside containing filters and a "main" section that should have 6 items displayed as individual cards. The challenge arises when viewing this on mobile screens, where the aside is hidden and the main section should utilize the full screen grid with each card taking up half of the section (2 cards per row).
The dilemma I face is how to achieve this without significantly modifying the card classes, especially since the content is already responsive on larger screens like iPads.
I have experimented with various combinations of grid classes for the columns as illustrated in the code snippet below:
<div class="row mr-5">
<div class="col-4 col-lg-4 col-md-5" id="aside-categoria">
// Aside content hidden using media queries
</div>
<div class="col-8 col-lg-8 col-md-7 col-sm-12" id="content-categoria">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<a href="#" class="custom-card">
<div class="card categoria-image">
<img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Product Image">
<div class="card-body pl-0">
<h1>Product Name</h1>
<small>Environment</small>
</div>
</div>
</a>
</div>
// Additional columns similar to the one above
</div>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<a href="#" class="custom-card">
<div class="card categoria-image">
<img src="images/landing/categoria/galeria-escritorio-apolo.jpg" class="border border-dark image-responsive" alt="Product Image">
<div class="card-body pl-0">
<h1>Product Name</h1>
<small>Environment</small>
</div>
</div>
</a>
</div>
// Additional columns similar to the one above
</div>
</div>
</div>
</div>
The desired layout is depicted in the image link below, showcasing the alignment of the product cards.
To view the current state of the page, please visit: