How can I properly align products on the collections page?

Store Design
1

I am trying to allign the products on the collections page, right now they are not alligned properly so one title is a little higher than the other etc. Does anyone have a solution, I know that the images should be the same size however I have hundreds of images so this would take ages. I am using the debutify 5.0 theme this is my url: https://www.phonesimpel.nl/ thanks in advance!

1 Like
2

Hi @niels_127
Sure, it is possible by implementing proper CSS.

For example:

.card-image img {
    height: 250px;
    object-fit: cover;
}

But in order to show all images properly. We have to assign proper sizes for all devices i.e. Desktop/Tablet/Mobile

1 Like
3

Thankyou for your response! Where should I add this css?

4

Thankyou this works, could you maybe also tell how I can edit the size of the text below so that this also alligns?

5

You are welcome. You can add this CSS in the end of any .css file of the theme.

In order to align titles and images, need to sync all CSS for all devices. If you want, I can assist you with custom solutions also.

Happy Coding

6

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.css and paste this at the bottom of the file:
.grid-product--wrapper {
padding-top: 100.584158%!important;
}

ZestardTech_0-1686824600655.png
ZestardTech_0-1686824600655.png1903×787 153 KB

1 Like
7

Thankyou so much

1 Like
8

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.