Second Product Image resizing

Store Design
, ,
1

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-dungeons-and-dragons-cthulhu-pathfinder-war-gaming

Thanks!

2

What theme are you using ?

3

Its a customised theme; Vogal version v1.1

4

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

BSSTekLabs_0-1720794010333.png
BSSTekLabs_0-1720794010333.png2878×1612 373 KB

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!

5

Its a customised theme; Vogal version v1.1

6

Legend, thank you so much :slightly_smiling_face:

1 Like
7

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! :wrapped_gift: :rocket:

1 Like