Help Needed to Fix Product Image Sizes

[Sheeks]

Hi ^^

I’m experiencing an issue with my store’s product images. My store URL is https://sheeksorority.com/products/halloween-costume-witch-vampire-dress-up-party?_pos=1&_psq=witch&....

The problem I have is that all the product images are inconsistent in size and some are getting cut off. I want the images to be consistent in portrait orientation across both desktop and mobile, ideally filling the entire phone screen. Additionally, the images in my Instafeed are varied in size, which creates a messy appearance. I’m aiming for a more cohesive look, with all images in portrait format and properly sized.

Can anyone help me look into this problem. pls^^

[BSS-TekLabs · Accepted solution]

Hi @Sheeks,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

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

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.main-product-item .main-product-img .media-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-product-item .main-product-img .media-box img {
    height: 100%;
    width: auto;
    left: inherit;
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[Sheeks]

Aww it work fine now. All not cut^^
Can u take a look at this SS - Instafeed section, the pic not same size

This more worser 😞

Help me plsss