Lightbox (gallery titles/descriptions) not appearing on mobile

Site URL: https://www.kroschlab.com/people-test

Hello,

This gallery looks how I want it to look, but the text display requires hovering (i.e., the hover effect) which is not compatible with mobile browsing.

Is there a way to differentiate between mobile and web browsing, so that the hover effect is off on mobile, but remains on computer browsing.

Note that there are two hover effects, that which shows before clicking on the image (just image title), and that which shows after clicking on the image (image title and description). 

Thanks!

On 2/17/2022 at 6:00 AM, noobiedesign said:

Site URL: https://www.kroschlab.com/people-test

Hello,

This gallery looks how I want it to look, but the text display requires hovering (i.e., the hover effect) which is not compatible with mobile browsing.

Is there a way to differentiate between mobile and web browsing, so that the hover effect is off on mobile, but remains on computer browsing.

Note that there are two hover effects, that which shows before clicking on the image (just image title), and that which shows after clicking on the image (image title and description). 

Thanks!

Add to Design > Custom CSS

/* Show hover description on mobile only */
@media screen and (max-width:640px) {
.sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper .image-slide-title {
    opacity: 1 !important;
    height: auto !important;
}
}