Different Images Accidentally Showing For Mobile And Desktop?

[CalCook100]

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!

[OTM]

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

[CalCook100]

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.