I found a workaround to this problem, which I wanted to share. The problem is that somehow the height of the images cannot be determined correctly, so one can just adjust it manually a few times depending on screen size:

.avia-mozilla .av-horizontal-gallery-inner { 
position: relative !important;
}
@media only screen and (max-width: 767px) {
.avia-mozilla .av-horizontal-gallery-inner { 
height: 200px !important;
}
.responsive .av-horizontal-gallery-fullwidth .av-horizontal-gallery-wrap {
        padding-top: 0px !important; 
        padding-bottom: 0px !important; 
    }
}

@media only screen and (max-width: 650px) {
.avia-mozilla .av-horizontal-gallery-inner { 
height: 180px !important;
}
}

@media only screen and (max-width: 450px) {
.avia-mozilla .av-horizontal-gallery-inner { 
height: 150px !important;
}
}

@media only screen and (max-width: 400px) {
.avia-mozilla .av-horizontal-gallery-inner { 
height: 130px !important;
}
}

Hi,
unfortunately this didn’t help. Can you reproduce this issue on your end? Open a firefox window, make its width small and then load the site. Even on desktop this issue is present for me.
Thanks for helping me with all of this.

Best regards
Bannix

Hi, changing the max-width did nothing, but I managed to fix it myself. My quick CSS now looks like this (the first part is to keep the original aspect ratios of the images, I did this previously by myself):

.responsive .av-horizontal-gallery-img {
    height: 100% !important;
    width: auto !important;
    object-fit: cover !important;
}
@media only screen and (max-width: 767px) {
    .responsive .av-horizontal-gallery-enlarge-effect .av-horizontal-gallery-wrap.av-active-gal-item {
        -webkit-transform: scale(1.3) !important; 
        -ms-transform: scale(1.3) !important; 
        transform: scale(1.3) !important; 
    }
    .responsive .av-horizontal-gallery-fullwidth .av-horizontal-gallery-wrap {
        padding-top: 20px !important; 
        padding-bottom: 50px !important; 
        }
}

Now everthing is exactly like I wanted it to be. But, there is still one problem: The gallery works fine on Chrome and Safari, but on Firefox it does some weird stuff and the images are all over the place and the controls of the gallery don’t work. Why is this the case now?

Hi, added the code under Quick CSS but unfortunately it changed nothing.
The horizontal gallery still transitions to mobile view when shrinking the window. You can see this because all of the pictures are the same height in mobile. In desktop mode, the active picture is always slightly bigger.

When using Firefox app on mobile, this even happens without scrolling, i.e. the intial active image is not centered by default, which shouldn’t be the case. Can you reproduce this on your side?

• This reply was modified 5 years, 6 months ago by Bannix.

I fixed it myself:

@media only screen and (max-width: 767px){
.responsive .av-horizontal-gallery-img {
    height: 200px !important;
    width: auto !important;
    object-fit: cover !important;
}
}

This thread can be closed I think.