Different Images Accidentally Showing For Mobile And Desktop?

52 0 1

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: 



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!

Shopify Expert
665 170 199

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;



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!
52 0 1

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.