How to display same size of product photos on desktop and mobile mode

[Crystalwclee]

Hi, anyone know how to make the display of my product photos remains portrait/vertical on both desktop and mobile? Now my product images are in portrait/vertical size on desktop but when I view them on mobile in my product page, the images are in square size. How do I make my images from square to vertical/portrait size on mobile?

[goldi07]

Hello @Crystalwclee Go to online store ----> themes ----> actions ----> edit code ---->assets ----> find ..
theme.scss.liquid or styles.scss.liquid open the file

add the code end of the file

@media (max-width: 768px) {
    .product-single__photo img {
        width: auto; 
        height: auto; 
        max-width: 100%; 
        aspect-ratio: 9 / 16; 
        object-fit: cover; 
    }
}

thankyou

[Crystalwclee]

hello, thanks for helping again

Sorry but I couldn’t find the file theme.scss.liquid or styles.scss.liquid.

[goldi07]

If you cannot find the files theme.scss.liquid, styles.scss.liquid, theme.css.liquid, or style.css.liquid, please add your code at the end of the base.css file. If it doesn’t work, send me the link to your website

thankyou

[Crystalwclee]

I still couldn’t find the exact file name under asset. Under my asset there are only these.

[goldi07]

open the base .css and add this code into end of the file

@media (max-width: 768px) {
    .product-single__photo img {
        width: auto; 
        height: auto; 
        max-width: 100%; 
        aspect-ratio: 9 / 16; 
        object-fit: cover; 
    }
}

thankyou

[Crystalwclee]

After input the code, the image are still square on mobile site

[goldi07]

sorry let me do it

[Crystalwclee]

hi, the collaborator request code is 3865

[goldi07]

plz send the store url

[Crystalwclee]

https://compoundcosmetics.com/products/relief-balm

[Crystalwclee]

Hi, is there any solution to this?