Supply theme mobile product page photo size

Solved
Kunal9
New Member
5 0 0

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'

 

0 Likes
WinkyApps
Explorer
52 13 12

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.

Did my answer work for you? Please drop a Like and Mark it as Accepted.
If you need further help or want to get something custom built for your Shopify store, then feel free to mail our team on winkyapps18@gmail.com
Happy to help.
0 Likes
Kunal9
New Member
5 0 0

Hi @WinkyApps,

Thanks for your reply.

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

0 Likes
Kunal9
New Member
5 0 0

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! 

0 Likes
WinkyApps
Explorer
52 13 12

This is an 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. 

Did my answer work for you? Please drop a Like and Mark it as Accepted.
If you need further help or want to get something custom built for your Shopify store, then feel free to mail our team on winkyapps18@gmail.com
Happy to help.
0 Likes
Kunal9
New Member
5 0 0

Hi @WinkyApps,

The new solution works!

Thanks for the help.

0 Likes