How to make all the product images the same size

[Chillsmart]

Hi all,

The images that are displayed in my product page are of different size. How do I make them the same size?

Site url: thechillsmart.com

[PageFly-Victor]

@Chillsmart  you can try this code

Add this css at the bottom

Online Store ->Theme ->Edit code

Assets -> theme.scss.css

.grid-product__image-mask {

    height: 220px;

}

[Chillsmart]

It is still the same 😕

[oscprofessional · Accepted solution]

Hello @Chillsmart 

Try this -

Go to the online store > theme > Edit Code >Assets >theme.scss.css >add code in this file.

.grid-product__image-mask .image-wrap {
    padding-bottom: 100% !important;
}

[Chillsmart]

It worked! Thanks!

[indyhome19]

Hi,

Is this possible to do with the Craft theme?

[Ammythach]

Mine is still the same 😞 I have boundless on if that helps

[Minuxe74]

Hello, I am having the same problem with the photos. I was trying to insert that code, but when I reach a certain point, I can't find the "theme.scss.css". Can you help me, please. I am attaching a pic so I can make sense. Thanks 

[thedirtybarcart]

Thanks for this, but I do not have that option. Here is a screen shot of what I see:

online store > theme > Edit Code >Assets >theme.js is the only option I see. My theme is Ella, if that helps.

 

[Minuxe74]

Hello Ella,

Thanks for your reply.

I was able to manage the problem with help from a friend.

But thanks!!

Ana

[thedirtybarcart]

I meant to say I am actually having the same problem, lol! Any insights on how to update within the Ella theme?

[HappyFido]

Checking in for an Update: have you guys found any solution?

I have the same issues using Habitat 

[oscprofessional]

Hello @Chillsmart 

Go to the oneline store > theme > Edit Code >Assets >theme.scss.css >add code in this file.

.grid-product__image-mask .image-wrap {
    height: 220px !important;
}

[thejustintharpe]

Hi @Chillsmart 

Follow these steps:

1. Go to your themes page
2. Click Edit Code
3. Find the file named "theme.css.liquid" or "base.css"
4. And paste the following code at the bottom of that file.

.image-wrap {
    padding-bottom: 100%;
}

Please let me know if it works.

[phgorvadia]

I have done with so many stores using the below code 
https://doublemarvellous.com/blog/equal-heights-of-elements-with-vanilla-js-in-shopify/

[Alekan]

Where do you post the code it says in the link? Thanks

[phgorvadia]

Yes its in the link

[Happy6]

Hi, I tried this and it didn’t work unfortunately. Can you advise where I can find the line of code now to remove it? Thanks 

[topkozuchy]

Hello I have same problem, I added code it helped for computers but it didnt for mobile devices. Do you know why ?

.grid-product__image-mask .image-wrap { padding-bottom: 100% !important; }