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 display 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.

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.

---

The following information was created for use with templates made with Squarespace 7.0.
Stay tuned for more tips and tricks for the new 7.1 platform!

---