Jump to content

Lightbox (gallery titles/descriptions) not appearing on mobile

Recommended Posts

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!

Link to comment
  • Replies 1
  • Views 344
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.