I have several websites where I'll use the Slides Element from SPPB's Winery Page Layout. The sites that are still using SPPv3.8.10 Pro are working fine but I run in to problems if I use SPPv5.2.5 Pro.
I'm running into an issue where the images and text are no longer layered properly within the slide.
Using the Inspect Element tool on https://sppagebuilder.com/winery-home the Z-Index styling looks to be working on the .sp-slider-image-align-center .
Using the Inspect Element tool on any of my sites that are using SPPv5.2.5 Pro the Z-Index styling stops working and the images are now rendered above the "text" layer.
(See example image)
The original Custom CSS that I'm finding within the the Slide element after importing from SPPB's Page Layout options is:
#addonId .sp-slider .sp-slider-content-wrap {
max-width: 1316px;
}
#addonId .sp-slider-content-align-left {
z-index: 2;
}
#addonId .sp-slider-image-align-center {
display: flex;
align-items: center;
z-index: 1;
padding-right: 5px;
}
#addonId .sp-slider .sp-item .sppb-sp-slider-image img {
width: auto!important;
height: auto!important;
}
#addonId .sp-slider-image-align-center .img1 {
margin-left: -132%!important;
margin-right: -40px!important;
}
@media (max-width: 1400px) and (min-width: 992px) {
#addonId .sp-slider .sppb-sp-slider-title.title {
font-size: 92px!important;
line-height: 95px!important;
}
}
@media (max-width: 991px) {
#addonId .sp-slider-image-align-center .img1 {
margin-left: -225%!important;
margin-right: -30px!important;
}
#addonId .sp-slider-image-align-center {
padding-right: 0px;
}
}
@media (max-width: 767px) and (min-width: 575px) {
#addonId .sp-slider .sp-slider-content-wrap {
max-width: 510px;
}
#addonId .sp-slider .sp-slider-outer-stage {
height: 575px!important;
}
#addonId .sp-slider-image-align-center .img1 {
margin-left: 0!important;
margin-right: -30px!important;
}
}
@media (max-width: 574px) {
#addonId .sp-slider .sp-slider-content-wrap {
max-width: 440px;
}
#addonId .sp-slider-image-align-center .img1 {
margin-left: 0!important;
margin-right: -30px!important;
}
}
Any suggestions on how to tweak the Custom CSS within the element or any other workarounds to to get the images and text layered properly?
Thanks!