Debut theme image alignment

New Member
7 0 0

Hi,

I've got images that are of different dimensions due the type of products. Some are tall, and some are wide. This causes the products in the collection page to be misaligned. Everything is flushed to the top, and following it is the product name and price. This makes the whole layout look really wonky.

Anyone knows how to align all images to the bottom so that the product name and prices can be aligned? Tried fidding the theme.scss.liquid but nothing seems to be working.

Thanks in advance.

E

 

0 Likes
Shopify Partner
17 2 5

Hi Ericson

For the best results, you can place your images in a fixed size template in Photoshop (or your favorite program). At least you'll always know everything is the same size.

You have some other options too:

You can try setting a min/max height & width to your images. The class you're looking for is .grid-view-item__image

The reason that your seeing the shifty misalignment is because the images/price's parent div container with the class .grid__item.  They are all floating to the left and by default vertically aligned to the top.

Which then means the other option is to try adding this to your css

.grid__item--collection-template {
    float: none !important;
    display: inline-block;
}

This will break the float method and align everything to the bottom. If it doesn't, try adding vertical-align:bottom; to the CSS above.

Let me know how that works out.

-Rob

RWH Studios - Shopify & WordPress eCommerce Designers & Developers
0 Likes
Tourist
7 2 0

Hello Rob

 

I saw this response dating back go 2017. I too have this issue, but two years on. I think the code has been updated since you replied. Could you suggest where I should look now for the same outcome?

Thanks in advance

0 Likes