Supply theme mobile product page photo size

[Kunal9]

Hi,

I have a store https://khshopned.myshopify.com based on the Supply theme.
But i'm not happy with the product image size on the productpage of the mobile version.

Is their a way to change de mobile photo size for the Supply theme.

The store is password protected, the password of the store is 'test'

[WinkyApps]

Hi @Kunal9 

Welcome to Shopify community and thanks for posting this question. 

Your theme has a predefined fixed width set for the product image as 387px. Not sure if it was customised later or the theme had it by itself.

However you could alter it specifically for mobile view by adding the below code at the bottom of your Settings > Online Store > Themes > Action > Edit Code > theme.css file

@media only screen and (max-width: 749px) {
    .product-photo-container .lazyload__image-wrapper { max-width: 250px; }
}

Feel free to adjust the size (250px) as per your need.

Let me know if this works for you. Hope this helps.

[Kunal9]

Hi @WinkyApps,

Thanks for your reply.

The solution doesn't work. I have change the max-width to 50px but nothing happends.

[Kunal9]

Hi @WinkyApps,

I think i've found the solution for it.

I've a replaced 'max-width' with 'width'. When i change the px it works.

Thanks! 

[WinkyApps · Accepted solution]

Hi @Kunal9 

Setting width as default will cause few problems on smaller devices or images that have smaller size dimension.

Try using this instead.

@media only screen and (max-width: 749px) {
    .product-photo-container .lazyload__image-wrapper { max-width: 250px !important; }
}

Let me know if this works. 

[Kunal9]

Hi @WinkyApps,

The new solution works!

Thanks for the help.