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

unfoldesthetics
Tourist
21 0 2

Hello,

 

Please help me fix this product card.

 

 

Screenshot 2023-10-30 at 11.41.07 PM.png

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

 

Screenshot 2023-10-30 at 11.44.08 PM.png

 

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

 

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

 

Thank you!

Replies 10 (10)

Dan-From-Ryviu
Shopify Partner
7678 1493 1496

Hi @unfoldesthetics 

What's password protected of your store?

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

unfoldesthetics
Tourist
21 0 2

hi!

I just removed the password temporarily so you can see.

Dan-From-Ryviu
Shopify Partner
7678 1493 1496

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; }
}

 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

unfoldesthetics
Tourist
21 0 2

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.

 

Screenshot 2023-10-31 at 1.30.26 AM.png

Dan-From-Ryviu
Shopify Partner
7678 1493 1496

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; }
}

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

unfoldesthetics
Tourist
21 0 2

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. 

 

Screenshot 2023-10-30 at 9.51.55 PM.png

 

 

Dan-From-Ryviu
Shopify Partner
7678 1493 1496

Hi @unfoldesthetics 

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

 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

unfoldesthetics
Tourist
21 0 2

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:

 

Screenshot 2023-10-31 at 1.59.16 AM.png

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

 

Screenshot 2023-10-31 at 1.58.38 AM.png

Dan-From-Ryviu
Shopify Partner
7678 1493 1496

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; }

 

 

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

zaczee
Globetrotter
848 46 42

Hi,

 

Do you want to make the button in one line