Hi Cristina. Add your class to the slide show addon and use the following code for correction.
@media (min-width: 1920px) {
.YOUR_OWN_CLASS .sp-slider-outer-stage {
height: 500px !important;
}
}
Set height value as you like.
Slide Show Addon, unfortunately from the very first release, has always been very buggy. Therefore, most of its settings can be forgotten and instead set up everything through CSS. And by the way, in my opinion, this is more convenient and more accurate control, even if the settings worked. Especially headache with sp-slider-outer-stage, which has other bugs on mobile devices that you have not yet noticed. Therefore, the height of this block at the breakpoints is always better to control only through CSS, but not through settings.
These problems have been reported for several years. But unfortunately, the team does not fix this.
Here is full CSS snippet to control sp-slider-outer-stage height at all bootstrap breakpoints:
/* Mobile First */
.YOUR_OWN_CLASS .sp-slider-outer-stage {
height: 500px !important;
}
@media (min-width: 576px) {
.YOUR_OWN_CLASS .sp-slider-outer-stage {
height: 500px !important;
}
}
@media (min-width: 768px) {
.YOUR_OWN_CLASS .sp-slider-outer-stage {
height: 500px !important;
}
}
@media (min-width: 992px) {
.YOUR_OWN_CLASS .sp-slider-outer-stage {
height: 500px !important;
}
}
@media (min-width: 1200px) {
.YOUR_OWN_CLASS .sp-slider-outer-stage {
height: 500px !important;
}
}
@media (min-width: 1400px) {
.YOUR_OWN_CLASS .sp-slider-outer-stage {
height: 500px !important;
}
}
@media (min-width: 1920px) {
.YOUR_OWN_CLASS .sp-slider-outer-stage {
height: 500px !important;
}
}
You can use not all Media Queries but do not change their order. Set height values at different breakpoints as you like.
