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

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

Crystalwclee
Excursionist
30 0 10

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?

Crystalwclee_0-1727927894616.jpeg

 

Replies 11 (11)

goldi07
Excursionist
31 3 4

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 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here
Crystalwclee
Excursionist
30 0 10

hello, thanks for helping again 🙂

 

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

Crystalwclee_0-1727938578111.png

 

goldi07
Excursionist
31 3 4

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 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here
Crystalwclee
Excursionist
30 0 10

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

Crystalwclee_0-1727940278185.png

Crystalwclee_1-1727940292827.png

Crystalwclee_2-1727940307416.png

Crystalwclee_3-1727940320672.png

Crystalwclee_4-1727940332088.png

 

 

goldi07
Excursionist
31 3 4

Screenshot 2024-10-03 130503.png

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 

 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here
Crystalwclee
Excursionist
30 0 10

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

Crystalwclee_1-1727942706191.png

 

Crystalwclee_0-1727942542735.png

 

goldi07
Excursionist
31 3 4

sorry let me do it 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here
Crystalwclee
Excursionist
30 0 10

hi, the collaborator request code is 3865

goldi07
Excursionist
31 3 4

plz send the store url 😊

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here
Crystalwclee
Excursionist
30 0 10
Crystalwclee
Excursionist
30 0 10

Hi, is there any solution to this?