Fit slides with different heights

Wappler General How To
#21

Remove the img-fluid class from your images as well as any width and height attributes from the image tags.

<img src="../images/photos/Paestum_21.jpg" class="img-fluid" height="350">

should be

<img src="../images/photos/Paestum_21.jpg">

and also the rest of the images in the swiper.

1 Like
#22

Thank you Teodor.
Anyway Column is still too heigh.
I don’t want disturb you so if you can suggest me how to let image smaller I would be glad to you but if you don’t have time
don’t warry. I understand it isn’t a problem with wappler itself.

#23

https://www.campaniaturismo.org/test_room/test_swiper.php

Now it’s better but there is a problem with navigation arrows

#24

Now you can already go and add the media queries for different screen sizes, such as:

@media (max-width: 767px) {
.swiper-slide {
    height: 320px;
}
.swiper-slide>img {
    height: 320px;
}
}
@media (min-width: 768px) {
.swiper-slide {
    height: 480px;
}
.swiper-slide>img {
    height: 480px;
}
}
@media (min-width: 992px) {
.swiper-slide {
    height: 550px;
}
.swiper-slide>img {
    height: 550px;
}
}
@media (min-width: 1200px) {
.swiper-slide {
    height: 650px;
}
.swiper-slide>img {
    height: 650px;
}
}

just change the values according to your needs.

1 Like
#25

Thank you very much indeed.
It’s very kind of you. :+1: :+1:

#26

excuse Teodor, just last question.
Do you know why Safari on iphone 11 doesn’t interpret css in the right way?