Debut Theme - Slider Thumbnail Overlay Z-Index Problem

Store Design
, , , ,
1

I am having trouble getting my product page image slider to work correctly on desktop. The product image does not change when I click on the thumbnail, and I believe it to be relating to a z-index issue and custom CSS I have implemented to overlay a background color.

I have added this custom code to the “Custom CSS” in the Theme Editor.

.thumbnail-list__item:before {
  background-color: rgba(11, 11, 11, 0.02);
  position: relative;
  z-index: 2;
}
.image-magnify-full-size {
  z-index: 2;
}

Here is a link to my product page: https://francostellari.com/products/sterling-silver-yellow-gold-2-7mm-round-box-chain

Any insights will be greatly appreciated.

2

Hello @BaselineAce ,

Yes you are right. Issue is z-index remove the z-index from this rule and it will fixed.

.thumbnail-list__item:before {
  background-color: rgba(11, 11, 11, 0.02);
  position: relative;
  z-index: 2;
}
1 Like
3

Hi @BaselineAce

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

.thumbnail-list__item:before {
    z-index: 0 !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

1 Like
4

The problem with this is that it does not overlay the background to images that are on white (.jpg on white background).

5

Is it okay to change the code above to include this z-index? That did not solve my problem (images with white background are still pure white).

6

Regarding this issue, you should contact the theme you are using to receive the necessary support