Different Images Accidentally Showing For Mobile And Desktop?

Tourist
29 0 0

I've been trying to code a feature into my site so that the second image on the product pages is hidden (it's only included in Shopify to be featured in the All Products page -- that's why I don't just delete it).

 

On desktop the second image is properly hidden, but on mobile the first image is showing as a distorted version of the second product image which is supposed to be hidden. You can see this effect on an example product page here: 

https://illuminatelabs.io/products/panax-ginseng-extract

 

This is the code I inserted into the Theme.liquid asset file to institute this change:

 

.product-single__photos div.product-single__photo--flex-wrapper:nth-child(2) {display: none;
}

 

If anyone has an idea for how I might resolve this it would be much appreciated!

0 Likes
Highlighted
Shopify Expert
679 170 198

Hi, @CalCook100 ,

This is Evita from On The Map.

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

.slick-track .slick-slide:nth-child(3) {
    display: none;
}

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
29 0 0

Hi, thank you for this suggestion. Unfortunately it didn't work. Now the third image is showing on mobile, the first image is showing as the sixth image, and the seventh image is a blank page. You can see this now as I published the changes live.

 

Any ideas for how to fix this would be much appreciated.

 

Cheers.

0 Likes