Debut Theme - Slider Thumbnail Overlay Z-Index Problem

Debut Theme - Slider Thumbnail Overlay Z-Index Problem

BaselineAce
Tourist
3 0 0

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.

Replies 5 (5)

Guleria
Shopify Partner
3225 628 903

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;
}

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me. - Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
- Support me PayPal
BaselineAce
Tourist
3 0 0

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

PageFly-Richard
Shopify Partner
4439 1016 1669

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

BaselineAce
Tourist
3 0 0

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).

PageFly-Richard
Shopify Partner
4439 1016 1669

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.