How can I make my product grid consistent on all devices?

[unfoldesthetics]

Hello,

Please help me fix this product card.

I am hoping to make it look consistent with this product card.

I would like to get it fixed in mobile and desktop layout.

https://unfoldesthetics.com/collections/online-courses

Thank you!

[Dan-From-Ryviu]

Hi @unfoldesthetics

What’s password protected of your store?

[unfoldesthetics]

hi!

I just removed the password temporarily so you can see.

[Dan-From-Ryviu]

Go to your Online store > Themes > Edit code > open base.css file and add this code at the bottom

.card__content .card__heading--price {
    display: flex !important;
    flex-direction: column !important;
    padding: 0px !important;
}
.card__content {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
@media (max-width: 767px){
.card__heading--price .card__heading { margin-bottom: 0px; }
}

[zaczee]

Hi,

Do you want to make the button in one line

[unfoldesthetics]

Hi! I tried this code, but the button on the first product card is still not centered. It just made everything go to the left.

[Dan-From-Ryviu]

Please update code to this

.card__content .card__heading--price {
    display: flex !important;
    flex-direction: column !important;
    padding: 0px !important;
}
.card__content {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.card__content .card__heading--price .card__view-product { width: 100% !important; }
@media (max-width: 767px){
.card__heading--price .card__heading { margin-bottom: 0px; }
}

[unfoldesthetics]

Thank you! that centered the button, but I didn’t want the price to be on the left so is there a way to keep it on the right side across from reviews just like this.

[Dan-From-Ryviu]

Hi @unfoldesthetics

I can be but need to edit code of your theme file a little bit

[unfoldesthetics]

Okay! How can that be arranged?

Also, the code is causing the texts in all product cards to be pushed all the way to the left. How can this be adjusted on the code without affecting the positioning of the button?

This is what it looks like right now:

Ideally, I would like all product cards to be like this:

[Dan-From-Ryviu]

I found the way, please update code like this

.card__heading--price { display: block !important; }
.card__heading--price .vtl_ssct__trending-styles,
.card__heading--price .card__heading { margin-left: -10px !important; }
.card__heading--price .vtl_ssct__trending-style { float: left !important; }
.card__heading--price .card__view-produc { width: 100% !important; }
.card__heading--price .price { margin-right: -10px !important; }