We are Underground support

Making images the same size

Last Updated: Aug 25, 2016 09:04PM EDT

So you have your new Shopify store with your new theme but your images are all different sizes.
This results in product titles being thrown out of alignment!

This is a common issue.... In the long term and in the effort to give your customers the best possible shopping experience ideally you should look to correct the image sizes... Sometimes this takes money which you might not have.

In the short term there is a solution that will save you time, money and stress.

We can use a maximum height on images shown on collection pages ( multiple products ) to help keep them aligned, this is how:

Refresh the collection page view of your store to see what is going on with the alignment.
You may wish to return to the code that you just pasted in to increase or decrease this number until you start to see good alignment across the site.

What about Tablet and Mobile?

As you are limiting the size on these images here you are not quite out of the woods.
On a tablet display your product images will resize and you may encounter more issues with these... The same goes for mobile so a number of further alterations are needed.

/* Target all Mobiles */
@media screen and ( max-width:760px ) {
.product-index img { max-height: 280px; }
}
Click save when done.
Again you may want to test and tweak those numbers depending on how the products are showing on different devices.