I am currently working on an e-commerce website where all the products are displayed on the same page in "cols". Unfortunately, I am facing issues with fixing the column width and height using CSS.
<div class="container">
<div class="row">
<!-- BEGIN PRODUCTS -->
<div
class="col-md-3 col-sm-6 col-equal"
*ngFor="let p of (titres | sort: titreSort)"
>
<span class="thumbnail">
<img src="{{ p.URL_couv }}" alt="{{ p.id }}" />
<h4>
<label style="display: block; width: 600px;"
>{{ p.titre }} n° {{ p.numero }}</label
>
</h4>
<p></p>
<hr class="line" />
<div class="row">
<div class="col-md-6 col-sm-6">
<p class="price"></p>
</div>
<div class="col-md-6 col-sm-6"></div>
</div>
</span>
</div>
</div>
</div>This is the current code I have implemented for displaying the products, my challenge lies in formatting them properly.
Here is a preview of how the products are being showcased:
https://i.sstatic.net/12k2K.png
Additionally, this is the CSS code I am utilizing:
.side-body {
margin-left: 310px;
}
.right {
float: right;
border-bottom: 2px solid #4b8e4b;
}
.thumbnail {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.thumbnail:hover {
opacity: 1;
box-shadow: 0px 0px 10px #41d834;
}
.line {
margin-bottom: 5px;
}
@media (max-width: 768px) {
.col-equal {
margin: auto;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
}If anyone could provide assistance or guidance on resolving this issue, I would greatly appreciate it. Thank you!