First horizontal gallery Initial Active Image moves after scrolling vertically

Hi, thank you for the quick response.
As I said, this does not happen when using a desktop device, even when making the window small enough to activate the mobile view of the gallery. It specifically happens on a smartphone (1080×1920) when using Google Chrome app. I attached two pictures (via dropbox) to show the website before and after scrolling down and then up again.

Best regards,
Bannix

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.

Well, the full width easy slider isn’t quite what I’m looking for. And this problem is probably a bug within the mobile version of the horizontal gallery, as it happens on two different browsers (and I’ve now reproduced it on multiple real mobile devices of friends). Is it possible to deactivate the transformation of the horizontal gallery when going just below 768px, i.e. having the desktop verison show on mobile?

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.

Hi, thanks! I have no clue why this works, but it does. The weird behavior with the scrolling is now gone. However, the active picture is now cut off at the top and the bottom, because it gets enlarged, i.e. the container of the gallery is too small (?). How could one increase this accordingly?

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, this happens on mobile and on desktop when making the window small. In the private section you can again find two screenshots of the issue.

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, thanks for narrowing it down. Unfortunately, this CSS code is necessary on all other browsers. Is it possible to specifically hide this horizontal gallery only for firefox users? And then display something else only for those users, e.g. a normal slider or static image?

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;
}
}