Slide Images & Text Are No Longer Layered Properly - Forum | JoomShaper
Solved SP Page Builder

Slide Images & Text Are No Longer Layered Properly

Asked by Brian 2 years ago Last activity 2 years ago

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!

Accepted answer

Marked as the solution
Brian Asked this
2 years ago

Hi Toufiq,

My apologies... I edited (removed links from some of my replies) yesterday and now I think this thread is out of order and a little confusing.

Yes the slide layering is working now... Thank You!

I've got multiple websites that I'm needing to update from SPPBuilder 3.8.10 and I'm just wanted to confirm, the solution was to:

1: Add the following Custom CSS to the Page (instead of adding it to the element)

.slide-content .sppb-col-xs-12.sppb-col-sm-9.sppb-col-md-9.sppb-col-lg-8.sppb-col-12 {
z-index: 9;
}

2: Add a CSS Class to the Section

slide-content

Is there anything else that needed to be modified or added that I am not seeing?

Thanks Again For Your Help!

6 more replies

Oldest first Newest first Most helpful
Toufiq Senior Staff
2 years ago

Hi there,

Thank you for reaching out, and I apologize for any inconvenience caused by this oversight. I don't understand what exactly do you want. Cause, I have checked your site & demo. Both is displayed fine.

https://www.joomshaper.com/page-builder/layouts/winery

Best regards,

Toufiqur Rahman (Team Lead, Support)

Brian Asked this
2 years ago · edited

Hi @Toufiq ,

What two sites are you looking at?

https://www.joomshaper.com/page-builder/layouts/winery and
https://sppagebuilder.com/winery-home are your sites that look fine.

The other link I sent is an image of two screenshots. The Top screenshot is from your site to show a correct rendering. The Bottom screenshot is what is being rendered after I try to use the same Winery Slide Element with SPPv5.2.5 Pro. I even included the Inspector Tool rendering that is clueing us that it's not able to render the Z-Index properly.

I have multiple sites using the Slide Element from the Winery template that are working just fine... but they are all using SPPv3.8.10 Pro.

If I try to use the exact same slide in SPPv5.2.5 Pro the text and images are no longer layered properly.
Here is the example image of the two screenshots again:

Are you guys able to render the Winery Slide Element properly after importing into SPPv5.2.5 Pro?

If so, great! Send me a link to the JSON file.

Thanks!

Toufiq Senior Staff
2 years ago

Will you please provide me the Joomla administrator access to check the issue?

Toufiq Senior Staff
2 years ago

Login credential doesn't work.

Brian Asked this
2 years ago

Hmmm... I just logged in using the credentials within the hidden content.

Toufiq Senior Staff
2 years ago

Add this css code inside the custom.css file. 

.slide-content .sppb-col-xs-12.sppb-col-sm-9.sppb-col-md-9.sppb-col-lg-8.sppb-col-12 {
    z-index: 9;
}
Brian Asked this
2 years ago

Hi Toufiq,

I added the code and although the slides will now render and layer properly within the Front Page editor, it doesn't seem to translate to the preview mode or regular front end page views and are still not layering properly.

Are you seeing differently? Any other suggestions?

Thanks,
Brian

Toufiq Senior Staff
2 years ago

Can you share a screencast video?

Toufiq Senior Staff
2 years ago

Please check now.

Brian Asked this
2 years ago

Yes it is working... Thank You!

I've got multiple websites that I'm needing to update from SPPBuilder 3.8.10 so to clarify, the solution was to:

1 Add the following Custom CSS to the Page (instead of the element)

.slide-content .sppb-col-xs-12.sppb-col-sm-9.sppb-col-md-9.sppb-col-lg-8.sppb-col-12 {
z-index: 9;
}

2 Add a CSS Class to the Section

slide-content

Is there anything else that needs to be modified or added to complete this solution for my other websites?

Thank You!

Brian Asked this
2 years ago · edited

Hi @Toufiq ,

Sorry to take so long responding. I've been working on other sites and thought I might be able to work out this issue on my own but have had no luck.

Any of my sites still using SPPBuilder 3.8.10 work fine but if I update to the latest SPPBuilder I run in to this z-index issue within the Slideshow Addon.

I was crossing my fingers and hoping that todays SPPBuilder update was going to solve this issue but as you can see here, it doesn't.

This page is imported directly from your Winery Layout.

I apprecaite you looking into the issue I'm having and am including login creditials (Hidden Content).

Thanks,
Brian

Brian Asked this
2 years ago · edited

Screenshot using SP Builder v5.3.0 Front end Editor. This page was imported from your Winery layout and using the default Custom CSS code:

Next screenshot is after I add the CSS code your suggested. Note the images are now behind the layer of text which is how it is supposed to be.

Next, is a screenshot of the Preview after Saving the modified page. Note that the images are layered on top of the text.

The last screenshot is how end users see the page and again, the images are layered on top of the text.

Log in to reply.