Empire Theme - Make all images same size and in Ratio

Store Design
1

I am looking to see how I can adjust the images on my website using CSS so that they are all in-line together. Some of them are larger than others and if you’re viewing the collection, this will cause the pricing to move up and leave empty space.

Also, on the product page itself when you go to click another product image it will require you to scroll because some images are larger than others.

Any help would be greatly appreciated.

2

@John_Fishing

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi @John_Fishing ,

Can you give me your site URL? And if your site is password protected, please send me the password. I will check it.
have a great day!

4

hello @John_Fishing

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

5

the shopify url is: https://biggerfishing.com/

6

@John_Fishing

thanks for detail please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.productitem--image {padding-top: 100%;}
.productitem--image img {
top: 0 !important;
    transform: none !important;
    left: 0 !important;
    position: absolute;
    height: 100% !important;
    object-fit: contain;
}
7

Thank you very much! That did it!

8

@John_Fishing

it’s my pleasure to help us

9

Hello,

Will this code work for Craft theme?

Thanks

Indy