HOW TO DISPLAY GALLERY CAPTIONS ON A MOBILE DEVICE

 

Ever notice how sometimes a perfectly amazing feature set up for a desktop browser doesn't quite translate like you want it to on mobile? It's a bummer and can make you rethink the whole design. 

This happened to a client's site recently when I set up a gallery of her art work and displayed the name of each painting as a caption. The default gallery caption option displays the caption when you hover your mouse over the image. Cool! But not so cool on a mobile device where it just doesn't diplay at all! Womp womp.

So, I've found a way to modify the caption display so that it will always work no matter what device you're on.

 

How to display gallery caption on a mobile device:

  1. First, head into the Design panel.
  2. Click Custom CSS. 
  3. Paste in the following code:

/*** DISPLAY GALLERY CAPTION ***/

.yui3-lightbox2 .sqs-lightbox-meta {
opacity: 1 !important;
background: rgba(0, 0, 0, 0.7) !important;
}
@media only screen and (max-width: 1024px){
.yui3-lightbox2 .sqs-lightbox-meta{
bottom: 0px !important;
}
}

 

And that's it! You should now be able to view the gallery captions on both mobile and desktop browsers.


 

Related Posts

NEED EVEN MORE HELP WITH SQUARESPACE?

Skip the overwhelm and have your website designed and launched in just 5 days (or less)!

LEARN MORE