How can I adjust collection grid box heights on my eCommerce site?

[mixnight]

Hello, I can’t find a solution for this problem with the collection grid boxes height and I’m aware that the problem with the height is related to the images size, but I have hundreds of images to resize and I’m looking for a changing the code solution.

1: the product names are too long, so in the collection grid boxes it was showing only 15 characters for the name, I changed the code and now the product names are taking two lines into the collection grid boxes, this way the collection grid boxes have different heights but not too bad.

2: the some of the pictures at the collection grid boxes and into the product itself page were cropped, changed the code and now the pictures in both collection grid boxes and product page looks not cropped any more.

3: After changing the code for issue #2 (cropped pictures), almost all of the collection grid boxes are showing different heights.

Already contacted tech support for issue #3 and they sent instructions about choosing small, medium and large image size from the “customize”, it didn’t work.

They also said that using a resizing app could help, I installed an app and it did the process of resizing but the website keep showing different collection grid boxes height.

Tech support said that adding**.thumbnail { height: 500px; }** at the end of the styles.scss.liquid. It didn’t work.

Other users on the Shopify forum having the same problem are pasting different pieces of the code to the theme.scss.css, but I don’t have the theme.scss.css, what I have is styles.scss.

What I need is to have the same height of the boxes regardless of the height of the pictures, so editing and resizing the pictures is not an option for me.

Please guide me on a solutions modifying the code.

Thank you.

https://407flightstore.com/collections/air-jordans

[Ajay-app-dev]

Hi @mixnight

Perfect solution by modifying CSS rules. You can add this code to your theme.css file. It works fine. If does not work, let me know.

.product_listing__main .product_img {
position: relative;
height: 260px;
}
.product_listing__main .product_info {
padding: 15px 0;
height: 70px;
}

.product_listing__main .product_name {
font-size: 10px;
letter-spacing: .3em;
text-align: center;
text-transform: uppercase;
} 

[mixnight]

Yes, this piece of the code works, thank you so much.

[Ajay-app-dev]

** @mixnight **

Good to know this. Please mark the Answer correct/Accepted for future reference.

[mixnight]

One more thing before I accept the solution to the original question:

Is there a way to change the current collections from auto to manual without having to delete it and create it again, then assign products manually?

[Ajay-app-dev]

No. As per my understanding, you will have to create the collection again and assign the product manually.

[mixnight]

Please help me with a new issue, today the website is showing on the collection grid boxes the boxes with no image is not showing the button black bar.

How can I fix this using a code?

Thank you.

[Ajay-app-dev]

It’s looking perfect from my side. Please clear the cache or open store in private window.

[mixnight]

Thank you for answering, my browser (on Mac and PC) is still not showing the black bar at the bottom of the collection grid boxes when a product doesn’t have a product image, it looks like the “no image” picture is taller than de grid, maybe?

Also, I answered to your message.

Thank you.

[msfurnishings]

I am having the same issue but with the sub categories under the categories section. The writing is also being cut out.

[Ajay-app-dev]

@msfurnishings , kindly share the url

[msfurnishings]

https://ysrf5av61thco4ea-58036912307.shopifypreview.com

[Ajay-app-dev]

@msfurnishings

Thanks,i checked the whole page design is distorted. We need to work on the whole page including the design issue. Check your message.

[jmmultiservices]

Hello Ajay! Hope you are doing well. I am trying to align my collections to all be the same height, but I keep coming across a block. I have tried your solution above, but it didn’t work for my theme. I am using the Debut theme, could you take a look and see if you could help, please?

J & M Multi Services Boutique™ | Fashion Online for Men and Women (jmmultiservicesboutique.com)

Thank you,

J&M Multi

[BIGBEAUTYL]

Hello, I encountered the same problem. Depending on the length of the title or the underlined price, the height would be inconsistent. Looking forward to your reply

[Popularitems]

hello i messed up my code adding and taking this away please help

[gayled]

@Ajay-app-dev we have a similar problem with our store, using turbo theme, I cant find a theme.css file are you able to give me any more information on where to add the code?