hide an image from Advanced gallery on small mobile devices

  • Resolved brucemacg

    (@brucemacg)


    1 year, 7 months ago

    Hi

    I’m using Advanced Gallery on my homepage to display images which link to my main product categories. There are 9 links, so my default view is a 3×3 Gallery. This looks great.

    When the screen gets too small, the view switches to a 2 column view. This results in 2×5 column, with the very last image being empty…. This doesn’t look great, so I’d like to hide one of the images in the gallery, and just have a 2×4 gallery. How can I achieve this?

    cheers, Bruce

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support karlalevelup

    (@karlalevelup)

    Hi there!

    There is no built-in option to do that.

    On the other hand, you can hide the last image on mobile views by adding this to your Customizer > Additional CSS:

    @media screen and (max-width: 542px) {
.kb-gallery-wrap-id-_4d731c-7a .kb-gallery-ul .kadence-blocks-gallery-item:last-child .kadence-blocks-gallery-item-inner {
    display: none;
}
}

    This will only affect this Advanced Gallery block – https://share.getcloudapp.com/04u6zZGn

    You can also add two Advanced Gallery blocks and control their visibility by adding them inside the Row Layout block. One will show on mobile views only while the other will show on desktop and tablet views – https://share.getcloudapp.com/nOuK4OE5

    I hope this helps, and let us know if we can assist you further.

    Best Regards,
    Karla

    Thread Starter brucemacg

    (@brucemacg)

    Hi Karla

    I like the CSS option, as it’s way simpler. Your CSS works perfectly, however, I’d really like the second last link (Gift cards) to be hidden, rather than the last link… How do I achieve this??

    cheers, Bruce

    Plugin Support Gilbert Hernandez

    (@ghernkadence)

    Hello @brucemacg,

    Try the following CSS instead:

    @media screen and (max-width: 542px) {
   ul.kb-gallery-ul.kb-gallery-non-static.kb-gallery-type-grid.kb-gallery-id-_4d731c-7a.kb-gallery-caption-style-bottom-hover.kb-gallery-filter-none li.kadence-blocks-gallery-item:nth-last-child(2) {
      display:none;
   } 
}
    Thread Starter brucemacg

    (@brucemacg)

    That works 100%. Thank you very much

    great support, thanks Bruce

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘hide an image from Advanced gallery on small mobile devices’ is closed to new replies.