Second Product Image resizing

[paragon_star]

Hi,

Can someone tell me what coding I need to do to get all the images on the product page the same size. I've tried a few but none are working e.g. see second image on this page

https://paragonstar.co.uk/products/deep-minder-abomination-resin-miniature-many-size-options-dungeon...

Thanks!

[WalkYourStyle]

What theme are you using ?

[paragon_star]

Its a customised theme; Vogal version v1.1

[paragon_star]

Its a customised theme; Vogal version v1.1

[BSS-TekLabs · Accepted solution]

Hi @paragon_star,

You can follow these steps to make the effect

1. Open Online Store > Theme > Edit Code

2. Find and open the theme.css (or base.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

.imgWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* You can change this value to fit your preference */
    height: 550px;
    overflow: hidden;
    background: black;
}

.imgWrapper img {
  width: auto; 
  height: 100%; 
  object-fit: cover;
}

Here is the result

And the best way to make the images look consistent is to make them the same size in the first place.

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[paragon_star]

Legend, thank you so much 🙂

[BSS-TekLabs]

You're welcome!
And if you're looking to add custom free gift functionality to your store, you should definitely check out our app, Salepify! It's designed to enhance your sales strategy with features like tiered discounts, cart rewards, and seamless integration with Shopify! 🎁🚀