Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #1093051

    Hi,
    i am using the horizontal gallery element on my website. On mobile, the Initial Active Image is initially at a left value of

    <div class="av-horizontal-gallery-slider" style="min-width: 9288px; left: -4733.23px;">

    When i now scroll down (not touching the gallery) and then scroll up again, the Initial Active Image isn’t centered anymore, but slighty offset. It is now at

    <div class="av-horizontal-gallery-slider" style="min-width: 9288px; left: -4795.03px;">

    i.e. the image was shifted by about 62 pixels to the left. Now you can see 62 pixel of the second image and it looks ugly.
    How can one prevent this behaviour? Note that this doesnt occur when using the mouse wheel (but only when actually using a mobile device). In desktop view this also doesn’t happen. See private url to view this behaviour.

    #1093628

    Hey Bannix,

    Thank you for using Enfold.

    What is the screen resolution of your monitor? We checked the site using Chrome Windows 8 on a 1920x1080px screen, but we could not reproduce the issue. The initial width and left position values stay the same after scrolling.

    
    <div class="av-horizontal-gallery-slider" style="min-width: 17942px; left: -8574.06px;">
    

    Best regards,
    Ismael

    #1093643

    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

    #1093965

    Hi,

    Thanks for the update.

    We’re not really sure why would that happen. Have you tried to manually set the width of that container to 100% or full width? You can also hide the element using the Screen Options and display another.

    Best regards,
    Ismael

    #1094750

    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 3 weeks, 4 days ago by  Bannix.
    #1095183

    Hi,

    Thanks for the update.

    We can’t reproduce the issue on our end, mainly because we’re checking it on a device emulator. One workaround is to hide the horizontal gallery using the Screen Options and display a full width easy slider on mobile view.

    Best regards,
    Ismael

    #1095520

    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?

    #1097268

    Hi,
    Sorry for the late reply, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
    .av-horizontal-gallery-animated .av-horizontal-gallery-wrap {
        -webkit-transition: none !important; 
        transition: none !important; 
    }
    .responsive .av-horizontal-gallery-fullwidth .av-horizontal-gallery-wrap {
        max-width: 100vw !important; 
    }
    }
    

    Then Please clear your browser cache and check.

    Best regards,
    Mike

    #1097291

    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.

    #1097308

    Hi,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) {
    .responsive . (Purchase code hidden if logged out)  .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; 
    }
    }

    Best regards,
    Mike

    #1097314

    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?

    #1097324

    Hi,
    Well, that sounds positive, first please try changing the first css from 100vh to 85vh, here’s the updated css:

    @media only screen and (max-width: 767px) { 
    .av-horizontal-gallery-animated .av-horizontal-gallery-wrap {
        -webkit-transition: none !important; 
        transition: none !important; 
    }
    .responsive .av-horizontal-gallery-fullwidth .av-horizontal-gallery-wrap {
        max-width: 85vw !important; 
    }
    }

    If this doesn’t help, please remove both css code blocks so I can try again.

    Best regards,
    Mike

    #1097418

    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 . (Purchase code hidden if logged out)  .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?

    #1098463

    Hi,

    Thanks for the update.

    but on Firefox it does some weird stuff

    Is this also happening on mobile view? The site looks fine on Firefox Windows 8. Would you mind providing a screenshot?

    Best regards,
    Ismael

    #1099347

    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.

    #1099880

    Hi,

    Thanks for the update.

    Have you tried adding the -moz- prefix in the following css?

    
        .responsive . (Purchase code hidden if logged out)  .av-horizontal-gallery-wrap.av-active-gal-item {
            -webkit-transform: scale(1.3) !important;
            -moz-transform: scale(1.3) !important; 
            -ms-transform: scale(1.3) !important; 
            transform: scale(1.3) !important; 
        }

    I’m not really sure if this is going to help, but it’s worth a try. Please don’t forget to purge the cache and toggle the Performance > File Compression settings.

    Best regards,
    Ismael

    #1100002

    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

    #1101267

    Hi,

    Thanks for the update.

    The following css code seems to be causing the issue, more specifically the width property.

    .responsive .av-horizontal-gallery-img {
        height: 100% !important;
        width: auto !important;
        object-fit: cover !important;
    }
    

    This is how it looks when we disable the width property.

    Screenshot: https://imgur.com/a/ShbJDgo

    Best regards,
    Ismael

    #1101410

    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?

    #1101759

    Hi,

    Is it possible to specifically hide this horizontal gallery only for firefox users?

    Yes, that is possible. You can prepend the “.avia-mozilla” selector to the id or class attribute of the horizontal gallery. Example:

    .avia-mozilla .av-horizontal-gallery { display: none !important; }
    

    Best regards,
    Ismael

Viewing 20 posts - 1 through 20 (of 20 total)

You must be logged in to reply to this topic.