Return to site

My images are different sizes. How can I line them up?

Are your product images all the same size? A lot of Shopify stores have images of various sizes, but we can still make your recommendations look great with some custom CSS. Here's how to get product images to line up nicely within the Better Recommendation widgets.

Here's an example store where the first of the three product images in smaller than the others. As a result, the product names and prices don't line up. We can apply custom CSS to line them up nicely so they look like this.

Before

Images are not the same size

After

broken image

Step-by-step

1. OPEN PREVIEW

On the Better Recommendations installation page, click the tab for the widget you want to change. In this example we're dealing with recommendations on Product pages.

broken image
2. CLICK 'CUSTOM CSS'

For the sake of this example we're temporarily adding an outline to each of the products so that it's easier to see the alignment. We do this with the following CSS code.

  .betterrecs-product { border: 1px solid grey; }
broken image
3. ADD CSS

There are two approaches to lining up the images.

OPTION 1 - ADD A MINIMUM HEIGHT TO THE PRODUCT IMAGES .betterrecs-image { min-height: <height of largest image>; }

 

This lines up the product titles and prices, but the images are not aligned. It does have the advantage that if you have forgotten about any images that are bigger than the minimum you specified, they won't be truncated (though the title and price won't line up in that case).

broken image
OPTION 2 - VERTICALLY ALIGNING THE PRODUCT IMAGES .betterrecs-image { display: inline-block; } .betterrecs-image > .betterrecs-link { display: table-cell; vertical-align: middle; height: <height of largest image>; }

vertical-align only works for table cells or inline elements. We'll make the <a class="betterrecs-link"> element that contains the image into a table cell, so that we can vertically align the image to the middle.

Amusingly, now that it's a table-cell we can't use min-height - we have to set the image height to a fixed value, so any images that are bigger will get cropped.

We also have to set the surrounding element to have display: inline-block so that the image continues to be centered horizontally.

broken image

If you added the outline temporarily as we did, don't forget to remove it again.

If you need any help with customizing recommendations widgets so they look great on your store, please don't hesitate to contact us.

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OK