Now the add to cart is not aligned after I added some review ratings for some products. Does anyone how to make Add to cart lower for all the products?
<div class="product-container">
<div class="all-products-wrapper">
{% for product in collections['lens-1'].products %}
<br>
<div class="product-card">
<img
width="100"
height="90"
loading="lazy"
src="{{ product.featured_image | image_url}}"
>
<h5>{{- product.title | link_to: product.url }}</h5>
<p>{{- product.description | truncate: 150 }}</p>
<div>
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="Select Lens" class="btn" />
</form>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<style>
@media(max-width:767px){
.product-card {
width:50% !important;
max-width:50% !important;
}
}
.btn{
min-height:50px;
}
.all-products {
background: {{ section.settings.background }}
;
color: {{ section.settings.text_color }}
;
padding: 10px;
}
.all-products-wrapper {
transition: transform 0.3s ease; /* Add smooth transition effect */
}
.product-container {
position: relative;
overflow-x: scroll;
}
.product-card {
width:30%;
padding: 10px;
box-sizing: border-box;
flex-direction: column;
justify-content: center;
align-items: center;
}
.product-card h3 a {
color: black;
text-decoration: none
}
.product-card a:hover {
text-decoration: underline;
}
</style>
