How to align images on product collections on Debut theme

Highlighted
New Member
7 0 0

I want to align all of the products on my collection pages to sit at the same height, so the product titles are all sitting next to each other and they sit in a straight line.

I know the issue is that the images are different sizes, but I've read I can create a max-height for the images so that they align but I can't firgure out how/where to add this on the Debut theme.

How can I do this using CSS? 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
718 44 120

Hi, Chloe

Elle here from Shopify!

In order to force a consistent image height for the product images on your collection pages, you can add the following code to the bottom of your stylesheet:

thumbnail { height: 500px; }

500 can be replaced with the height that works best for your images. 

You may need to set a different height for mobile devices. To accomplish this you can use the following CSS:

@media only screen and (max-width: 767px) {
.thumbnail { height: 500px; }
}

Keep in mind that if you have any long product titles that span 2 lines, this may break the new layout of the collection page. If this does occur, the best way to resolve it would be to shorten your product titles. 

Let me know if this helps! 

 

Elle | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
7 0 0

Hi Elle, thanks for your reply. 

 

I've tried both and neither are working :(

 

Is there anything else I can try?

0 Likes
Highlighted
New Member
1 0 0

How do I align Product Titles and Product Images to appear in alignment on the Collection Page in Debut Theme. Capture.JPG

0 Likes
Highlighted
Tourist
14 0 3

Hi there,

 

I have the same problem with product titles, could you pls share your solution?

 

I appreciate your help

 

Thank you

Aydin


@Anchor_Produce wrote:

How do I align Product Titles and Product Images to appear in alignment on the Collection Page in Debut Theme. Capture.JPG


 

0 Likes
Highlighted
Excursionist
23 1 1

I also have the same problems, any ideas are appreciated.

0 Likes
Highlighted
Shopify Partner
931 136 153

Hi There!

For image consistency the best solution is to resize all images to a unified square ratio image (1000x1000 for example), this will result in better visibility all around. 

 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes