Product card and cart drawer

[sosober]

Hello everyone! 

I am trying to change the aesthetic design of my product grid but I still need some support.
For what concert the "ADD TO CART" button I would like it to be smoother in height and with less margin with the product and more margin with the bottom line.

Moreover also the image has some setting problem if you can check.

Finally, the cart drawer if you see has the trash icon smaller than the quantity and I'd like them in line.
And also on the desktop version the check out bottom I'd like it to be large as the total cart drawer and on the desktop version the titles "Your chart" and "Total Price" are too big.

Sorry for asking so many things but I'd really appreciate some support for this.

Thank you!

0byf0v-34.myshopify.com

mohwhi

[StevenT_A7]

Hi ,

For Adjusting the "Add to Cart" Button use following code in CSS-

.product-card .quick-add {
margin-top: 0;
margin-bottom: 20px; /* Adjust this value as needed */
padding: 10px 15px;
height: 45px; /* Adjust height as desired */
}

For Fixing Product Image Display Issues use following code in CSS:

.product-card .product-card__image {
object-fit: cover;
width: 100%;
height: 300px; /* Set a consistent height */
}

For Aligning Trash Icon and Quantity in Cart Drawer use following code:

.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
}

.cart-item .cart-item__quantity,
.cart-item .cart-item__remove {
display: flex;
align-items: center;
}

For Styling the Checkout Button and Cart Drawer Titles on Desktop use following code:

@media (min-width: 1024px) {
.cart-drawer__footer .checkout-button {
width: 100%;
}

.cart-drawer__header h2,
.cart-drawer__footer h3 {
font-size: 1.5rem; /* Adjust font size as needed */
}
}

Please backup your theme before any changes and use height and font size according to appearance .

Let me know if youe need any further help or proccess of implementing this.