Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #960767

    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

    #961597

    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

    #961954

    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

    #962452

    Hi,

    Can you please screenshot the icon you mean?

    Best regards,
    Jordan Shannon

    #962502

    Hi, here’s the image url

    Icon half missing

    Thanks
    JJ

    #962508
    #963197

    Hi jj_delaney,

    Try playing with these numbers to work out the perfect height for you.
    Image 2018-05-28 at 14.52.30.png

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

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