Slideshow Addon Responsive Settings - Question | JoomShaper
Back to the questions

Slideshow Addon Responsive Settings

K

kweb

SP Page Builder 2 years ago

Hi, I have following question - I saw people here with similar problems but without a solution for mine:

I want to use the slideshow addon for commercial banners. Most of the banners have text in it. Here is an example:

To page

As you can see when I resize the browser window, the slider keeps the height and everything left and right disappears. Thats not an option when we have text in the images, because the text is quite important. I want the slideshow to get a smaller height and keep the width and height relations.

For example I want it to work like this example

I have played around with the settings and I also found the CSS that I could alter, but e.g. when I place

.sp-slider .sp-item .sp-background { background-size: 100% 100%; }

the container around is not losing height and the width and height relations will not been kept.

Can you give me a hint with this?

kweb

0
5 Answers
Order by
Oldest Newest Votes
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #31496

Thanks for your feedback. I will share it with the developers.

0
K
kweb
Accepted Answer
2 years ago #31485

Hi sorry for the late reply. Ok, I understand. I would really recommend to add this feature (using an image) to the slideshow functionality. If you have Text in your image or you want to use the slider for ads banners - its useless.

Your second way is a workaround but would result in a lot of work to handle banners for your website....so no option for me Im afraid.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #26491

I understand. Your solution is prefereable as I said. 

.sp-slider .sp-item .sp-background { 
    background-size: 100% 100%; 
}

The example had used <img> tag whereas we are using background-image here. So, both scenarios are different.

Anyway, if you want to go hard, then I have a tip for you.

  1. Duplicate the slideshow section.
  2. Hide one for tablet and mobile devices.
  3. Show other one for tablet and mobile devices only.
  4. Here upload a different image that is suited with tablet and mobile devices.
0
K
kweb
Accepted Answer
2 years ago #26440

Hi, well that does not solve my problem. Its resulting in the same problem I already described. I get ugly whit space because the container roundabout is not resizing too, see screenshot:

When you compare it with my Example you see the diffrence.

kweb

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #25676

Hello kweb

Please use this CSS to Template Options -> Custom Code -> Custom CSS and check the differences. But I prefer your CSS.

.sp-slider .sp-item .sp-background { 
    background-size: contain; 
    background-repeat: no-repeat;
}

Best regards

0