![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: horizontal gallery
-
AuthorPosts
-
April 28, 2018 at 1:27 am #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
April 30, 2018 at 10:00 am #948931Hey laurafirth,
Can you disable caching and minification for now?
Best regards,
VictoriaMay 3, 2018 at 10:20 am #950623I 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 #951014Hi 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 #951420Hi,
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,
IsmaelMay 4, 2018 at 11:31 am #951550Hi, not work for me. I am using a Samsung S7.
-
This reply was modified 6 years, 4 months ago by
LBITT.
May 4, 2018 at 1:31 pm #951644Hi 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 #952645Hi,
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,
IsmaelMay 7, 2018 at 4:00 pm #952728Hi 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 #953212Hi Andrew,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
VictoriaFebruary 20, 2021 at 8:20 pm #1282538Hi, 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 #1283065Hi,
@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 -
This reply was modified 6 years, 4 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.