-
Posts
-
Dear Kriesi,
The height of the horizontal gallery is to small at mobile. I tried to fix this by using the following CSS:@media only screen and (max-width: 767px) {
.club-slider .av-horizontal-gallery-wrap {
height: 300px !important;
}}@media only screen and (max-width: 767px) {
.av-horizontal-gallery {
overflow: visible !important;
}}@media only screen and (max-width: 767px) {
.responsive .av-horizontal-gallery-img {
height: 300px !important;
}}Unfortunately still the images don’t show correctly (only a part is visible at mobile).
Kind Regards,
Lisa
Hey StyleCreations,
Currently the css above is setting the height of the images to 300px, if you want them larger try adjusting the css to suit. Please note that the images are 400px in height, so larger than that may distort the image aspect ratio and make then “stretched” on mobile.Best regards,
MikeHi Mike,
Unfortunately changing the height to 400px does not solve the issue. Images still don’t get displayed with a bigger height.
I have added a link to a screenshot.
Kind Regards,
LisaHi Mike,
I know the height in the CSS is for 300px. But at my phone the height of the image is not 300 pixels. If you use a simulator, the gallery shows up how it supposed to be. But if you use a real phone it does not.
The image stays smaller, even though the height is set to 300px. The spare space under the image of the gallery gets larger, but is empty. So somehow the viewport of the gallery does not get larger.
I hope you understand what I try to explain.
Kind Regards,
LisaHi,
Thank you for the update.
We adjusted the css code a bit. Please try it again, then temporarily disable the Enfold > Performance > File Compression settings and purge the cache to make sure that the changes take effect.
@media only screen and (max-width: 767px) { .responsive .av-horizontal-gallery.av-4jjnvc9-2446bbdde681cfd04907a6d49c39f8a5 .av-horizontal-gallery-img, .av-horizontal-gallery.av-4jjnvc9-2446bbdde681cfd04907a6d49c39f8a5 .av-horizontal-gallery-inner { height: 400px !important; } }Best regards,
IsmaelHi Ismael,
Unfortunately this adjustment in the code only makes the empty space under the gallery larger. You can find a screenshot via de link.
Kind Regards,
LisaHi,
Thank you for the screenshot.
We found invalid code in the Quick CSS field, such as double forward slashes. Is this intended to be a comment? We removed the invalid css code and moved all css media queries to the bottom of the field.
Previous CSS: https://pastebin.com/cb4TSS4E
There is also an < hr > element at the bottom of the gallery, which is only visible in mobile view and adds extra space.
Best regards,
IsmaelHi Ismael,
The code with // in front of it was my own code. I commented this out because it was a duplicate of the code you send me previous. But I didn’t wanted to delete it right away, because we still don’t have a solution for the problem.
The only thing that needs to be done is that the image of the gallery gets displayed entirely instead of partly. This just don’t happen at a mobile device (it does in a simulator).
Kind Regards,
LisaHi,
I checked your horizontal gallery on my Android phone and in a Chrome Dev simulation, but in both cases the image is not cropped, when I check with Safari in Responsive Design Mode, I found an issue with Safari so I added this css to your site and seems to solve.@media only screen and (max-width: 767px) { .responsive.avia-safari #top .av-horizontal-gallery-img { transform: none; } }Please clear your cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Height horizontal gallery mobile’ is closed to new replies.