How can I fix the text alignment in Venture Product Card Design?

Store Design
1

Hi Guys! :slightly_smiling_face:

We have little issue with the product card as you can see below, that the text is so much below the product. Is there any possibility of how to fix it? Website www.ibbedesign.com

Screenshot_10.png
Screenshot_10.png231×567 39.4 KB

Thank you in advance for any tips!

Lucie

2

Hello @IbbeDesign
Please share your product card url.
So that I will check and let you know the exact solution here.

3

Hi Pallavi,

it is valid for all items - the product card template on the collection pages has to be set up in a different way I guess.

Link with an example: https://ibbedesign.com/collections/benlemi

Thank you in advance

Lucie

4

Hello @IbbeDesign

working is fine!
Screenshot :- https://prnt.sc/13e8umx

5

Pallavi,

the product detail page is fine, but I mean the product cards in collections… For example here: https://ibbedesign.com/collections/coffee-tables

Screenshot_9.png
Screenshot_9.png1309×734 112 KB

1 Like
6

@IbbeDesign

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.product-card__image-container {height: auto !important;}
.product-card .product-card__image-container .product-card__image {min-height: auto !important;}

Hope this works.

Thanks!

7

@IbbeDesign

Add this for the mobile.

@media only screen and (max-width: 450px){
.product-card .product-card__image-container .product-card__image {min-height: auto !important;}
.product-card__image-container {height: auto !important;}
}
8

@dmwwebartisan

Amazing, it works for the web!!! Thank you very much

For the mobile is it also theme.scss.liquid?

Thank you

Lucie

1 Like
9

Hello @IbbeDesign

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
.product-card .product-card__image-container .product-card__image {
min-height: auto !important;
}
.product-card__image-container {
height: 200px!important;
}
10

@IbbeDesign

Yes, for the mobile, add the mobile code at the bottom of your assets/theme.scss.liquid file.

11

@dmwwebartisan

Thank you very much for your effort! Highly appreciated.
You might know as well if there is an option how to fix the size of the product grid - see below - each item in a different size and it doesn’t look good.

Screenshot_11.png
Screenshot_11.png1198×854 160 KB

Screenshot_10.png
Screenshot_10.png1312×890 214 KB

12

@IbbeDesign

You need to fix the product image’s height. Please upload images in the square format like 800x800 etc.

so all will work fine.

1 Like
13

@IbbeDesign

Thanks for your appreciation.

If helpful then please Like and Accept Solution

14

I’m having the same problem. Too much space between title and image. The titles and prices also are bottom justified. I’d rather they were top justified so they all started just under the image, lined up together. If the title is very long, it would just keep wrapping like it does not and the bottom prices would just not be level. https://www.funnyshirts.com/collections/hoodies

I have already added your code and it doesn’t appear to be doing anything in my case. Too much padding somehow? I’d also love if the product images could be bigger with less padding in between. Is that possible?