How to fix collection grid boxes height?

Solved
mixnight
Tourist
5 0 0

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

 

 

Screen Shot 2021-07-16 at 10.09.17 PM.png

 

 

0 Likes
Ajay_kumar_dev
Shopify Partner
55 7 5

This is an accepted solution.

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

solution.png

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
0 Likes
mixnight
Tourist
5 0 0

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

0 Likes
Ajay_kumar_dev
Shopify Partner
55 7 5

This is an accepted solution.

@mixnight

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

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
mixnight
Tourist
5 0 0

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?

0 Likes
Ajay_kumar_dev
Shopify Partner
55 7 5

This is an accepted solution.

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

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
mixnight
Tourist
5 0 0

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.

 

Screen Shot 2021-07-18 at 5.04.15 PM.png

0 Likes
Ajay_kumar_dev
Shopify Partner
55 7 5

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

Screenshot_20210719-092053_Chrome.jpg

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
0 Likes
mixnight
Tourist
5 0 0

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.

0 Likes