How to align images on product collections

Highlighted
New Member
3 0 0

I want to align the product images on the product collection pages so that they all sit aligned to the bottom edge of the image space (so that all images sit in equal distance to their descriptions). At the moment they are set to align to the top of the image space and look messy.

I'm using the Fashionopolism theme, does anyone have any suggestions how i can align these using CSS?

0 Likes
Highlighted
Shopify Expert
2686 67 716

Hi there,

only CSS would be not enough IMHO.

Add this to the bottom of the stylesheet.css Asset:

.prod-container a {
    display: table-cell;
    vertical-align: bottom;
}

Now for this to work, you should open your theme.liquid  Layout , somewhere in <head> find this code

    $(window).load(function() {  
      $('.prod-container').matchHeight();

    });
  

and change  '.prod-container' to be '.prod-container a'.

Before proceeding, make a backup copy of your theme by clicking 3-dot button by the theme name and selecting "Duplicate".

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
3 0 0

That is perfect, thanks so much for your help Tim.

0 Likes
Highlighted
New Member
3 0 0

how would I accomplish this in the supply theme?

0 Likes
Highlighted
Shopify Expert
2686 67 716

Kenneth,

if your product titles are lined up nicely, then it's a matter of adding this code to the bottom of the theme.scss.liquid Asset:

/* --tim: want our product images aligned at the bottom, not at the middle */
.product-grid-image--centered {
    vertical-align: bottom;
}

Otherwise it's also necessary to look why theme javascript does not align the titles (just downloaded Supply from the store and they've messed up with this. Previous version works fine.).

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
New Member
2 0 0

i am looking for same solution for Debut theme. Any help Tim????

0 Likes
Highlighted
New Member
3 0 0

Hi Tim,

I have minimal theme and I cannot get the thumbnails at the bottom to align.  Can you help?  Thanks in advance.

temp.png

0 Likes