Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 28, 2018 at 1:27 am #948242
    laurafirth

    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

    April 30, 2018 at 10:00 am #948931
    Victoria

    Hey laurafirth,

    Can you disable caching and minification for now?

    Best regards,
    Victoria

    May 3, 2018 at 10:20 am #950623
    LBITT

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

    May 3, 2018 at 7:06 pm #951014
    laurafirth

    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

    May 4, 2018 at 8:06 am #951420
    Ismael

    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

    May 4, 2018 at 11:31 am #951550
    LBITT

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

    • This reply was modified 6 years, 2 months ago by LBITT.
    May 4, 2018 at 1:31 pm #951644
    laurafirth

    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

    May 7, 2018 at 12:24 pm #952645
    Ismael

    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

    May 7, 2018 at 4:00 pm #952728
    laurafirth

    Hi Ismael

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

    Regards

    Andrew

    May 8, 2018 at 8:26 am #953212
    Victoria

    Hi Andrew,

    Glad we could help :)

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

    February 20, 2021 at 8:20 pm #1282538
    mattofelki

    Hi, found this post and it does not work form me. Please see both horizontal galeries on page SuperSport.
    Adding data to admin access below:

    February 23, 2021 at 1:10 pm #1283065
    Ismael

    Hi,


    @mattofelki     Did you define a custom css class name or ID for the horizontal gallery element?

    // https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

    In the following css code, you have to replace “custom-css-class” with the actual class name of the element.

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

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.