Slideshow Sliderhight Only Windows Height And Custom Height?
Raimo Lindner
Hello
I have problems to set the height of a slideshow to NOT a fixed height. There are only 2 options I found and that is window height and a custom height of a number of px, so fixed. Of course this works, but not really perfect on different display resolutions.
I am working on https://web80.onlime.ch/index.php/de/ Under HOME I set a custom (fixed) height, that match the slider pictures, but on other resolutions, it never looks perfect. I have specially colored the background blue for the section, so that you can see, that in the most resolutions the blue background is visible, but it should not.
Under TEST I created a slider with the YOOtheme widgetkit, and there it works/looks perfect on any resolution.
For example, if you move the browser window smaller, you can immediately see the difference between SP BP Slideshow and the YOOtheme Slider. On an iPad or iPhone you can of course also see the difference immediately.
So I guess, within the SP PB Slideshow this should managable too? But how? PageBuilder version is the last (5.3.0)
I would be very grateful for any tips.
Pavel
Accepted AnswerHi.
SP Slideshow is intended not only for images, but also for content. If the height of the slideshow will change in proportion to the image, then the content will go beyond the slideshow wrapper. That is why SP Slideshow does not have an option of a dynamic change in height.
You can achieve this using CSS or continue to use YOOtheme widgetkit for cases when you need only image slider without another content.
Mehtaz Afsana Borsha
Accepted AnswerHi Raimo,
Thanks for contacting us. You can follow Pavel's instructsion. It will help you.
-Regards.
Pavel
Accepted AnswerOK, what I have to set with CSS? Sorry to say, but I didn't found the right parameters...
- Use slide bg image instead of Image item
- Add your class to the addon's CSS class field
- CSS (add it to the custom.css file)
.YOUR_CLASS .sp-slider-outer-stage {
aspect-ratio: 2.8;
height: auto !important;
}You may need to more accurately choose the value of the aspect-ratio property, based on proportions of your image