Hi, I want to show a gallery of latest products on my home page, and tried Product Gallery but when you click on a product it takes you to the product page and I want the image to open in a lightbox.
So I have added a Horizontal Gallery element instead and that works well on desktop, however on mobile all the images are cropped so you only see half the image.
How can I make it so that on mobile the gallery shows the whole image?
Also, on mobile, the icon to click to open the image in a lightbox is only partially showing so not easy to see.
Thanks
Hey jj_delaney,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 479px) {
.av-horizontal-gallery .av-horizontal-gallery-inner {
height: 80vh !important;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.av-horizontal-gallery .av-horizontal-gallery-inner {
height: 120vh !important;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi Victoria,
Thank you so much that worked perfectly for the images on mobile.
The only issue left is the icon to open the lightbox is still cut off and barely visible. Any ideas on how to fix that?
Best regards
JJ
Hi,
Can you please screenshot the icon you mean?
Best regards,
Jordan Shannon
Hi, here’s the image url
Thanks
JJ
Just in case that doesn’t work.
https://www.evernote.com/l/AVRUSTPt6v1DhoKzctEa856JdMoYHkpdkfU