Slide Images & Text Are No Longer Layered Properly - Question | JoomShaper
Back to the questions

Slide Images & Text Are No Longer Layered Properly

B

Brian

SP Page Builder 3 months 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!

0
15 Answers
Order by
Oldest Newest Votes
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 months ago #146213

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)

0
B
Brian
Accepted Answer
3 months ago #146314

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!

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 months ago #146417

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 week ago #154718

Login credential doesn't work.

0
B
Brian
Accepted Answer
1 week ago #154726

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 week ago #154760

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;
}
0
B
Brian
Accepted Answer
1 week ago #154779

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 week ago #154849

Can you share a screencast video?

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 week ago #155006

Please check now.

0
B
Brian
Accepted Answer
6 days ago #155233

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!

0
B
Brian
Accepted Answer
1 week ago #154443

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

0
B
Brian
Accepted Answer
1 week ago #154938

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 days ago #155318

Backend editor

https://prnt.sc/0AFNHniy6LND

Do wanna like this on Front end ?

https://prnt.sc/0ELGCYMTRBjo

0
B
Brian
Accepted Answer
5 days ago #155328

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!

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 5 days ago #155335

No need to extra anything. Thanks

0