Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #948242

    Hi

    I was wondering if there is a fix for the Horizontal Gallery as it is not mobile friendly. I have set up on the Wishlist page a Horizontal gallery that does display very well on laptop, but as soon as the screen is reduced, it fails to display the full image no matter what settings I try.

    Another example is on the photos page, I have larger landscape images which will display, which is great for that size of images. However the portrait images do not display fully.

    Laura

    #948931

    Hey laurafirth,

    Can you disable caching and minification for now?

    Best regards,
    Victoria

    #950623

    I have the same problem. The caché is not the problem. The page is break when i clic in images.

    #951014

    Hi Victoria

    The cache is not the problem, but I will disable it for now, does this mean will look further into the matter?

    Laura

    #951420

    Hi,

    Thanks for the update. Try to adjust the minimum height of the gallery on mobile view.

    @media only screen and (max-width: 989px) {
    .responsive .av-horizontal-gallery-inner {
        position: static;
        min-height: 500px;
    }
    }

    Best regards,
    Ismael

    #951550

    Hi, not work for me. I am using a Samsung S7.

    • This reply was modified 10 months, 2 weeks ago by  LBITT.
    #951644

    Hi Ismael

    Thanks for the reply. The code when added to custom CSS changes the size of the color section only, not the images within the element. The page in particular that I am trying fix is the https://www.saralipswrestling.com/wishlist/ works perfect on laptop, but does not work on tablet or mobile with regards to images displaying correctly.

    Regards

    Andrew

    #952645

    Hi,

    You may need to define a specific height for each gallery. Please enable the custom css class field (Show element options for developer) from the Enfold > Layout Builder panel. Define a custom css class attribute for each gallery and define the height value accordingly.

    .responsive .custom-css-class .av-horizontal-gallery-inner {
        min-height: 200px !important;
    }
    
    .responsive .av-horizontal-gallery-img {
        transform: none !important;
    }

    Replace “custom-css-class” with the element’s custom css class attribute. This is the result after adding the css modifications by way of the browser inspector.

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

    Best regards,
    Ismael

    #952728

    Hi Ismael

    Worked perfectly, thank you for the help. I can now customise galleries individually if required.

    Regards

    Andrew

    #953212

    Hi Andrew,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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

You must be logged in to reply to this topic.