Display Gallery Captions on a Mobile Device

Hi

I want to always show the captions in a lightbox gallery. For this I found this script here (https://www.junemango.com/post/how-to-display-gallery-captions-on-a-mobile-device). If you open the lightbox and resize the window, the legend always moves a little bit out off the image. What can I do...? 😕 Sorry for my bad English 🙂

https://www.johannadahm.art/overview-ring-of-fire/fast-ashanti

Thanks a lot...

Best
Fabian

Add to Design > Custom CSS

.sqs-lightbox-slide img {
    width: 100% !important;
    left: 0 !important;
}

.yui3-lightbox2 .sqs-lightbox-meta {
    left: 0 !important;
    right: 0 !important;
}

Hey @tuanphan

I am hoping you might be able to help. I have created a slideshow gallery that allows images & video. I had to use this gallery type to allow both image and video in the same gallery, but on mobile the captions would not display. I found some code to put in to help (see below)
 

/* Mobile gallery title */

@media screen and (max-width:640px) {

   .sqs-gallery-block-slideshow .meta {

    display: block !important;

    opacity: 1 !important;

    bottom: -0px !important;

}}

This works however, the font size of the captions is currently too large - is it possible to reduce the font size and line spacing?

Or alternatively place the captions below? Elsewhere on other image-only galleries on site the captions are able to sit below, but I was not able to make this work on a gallery that used video & imagery.

https://www.josephine-rutherfoord.com/work-bound

Any help hugely appreciated!!

4 hours ago, ali-v said:

Hey @tuanphan

I am hoping you might be able to help. I have created a slideshow gallery that allows images & video. I had to use this gallery type to allow both image and video in the same gallery, but on mobile the captions would not display. I found some code to put in to help (see below)
 

/* Mobile gallery title */

@media screen and (max-width:640px) {

   .sqs-gallery-block-slideshow .meta {

    display: block !important;

    opacity: 1 !important;

    bottom: -0px !important;

}}

This works however, the font size of the captions is currently too large - is it possible to reduce the font size and line spacing?

Or alternatively place the captions below? Elsewhere on other image-only galleries on site the captions are able to sit below, but I was not able to make this work on a gallery that used video & imagery.

https://www.josephine-rutherfoord.com/work-bound

Any help hugely appreciated!!

 

Use this new code

@media screen and (max-width: 640px) {
    .sqs-gallery-block-slideshow .meta {
        display:block !important;
        font-family: 'futura' !important;
        opacity: 1 !important;
        bottom: 0px !important;
    }
    .sqs-gallery-block-slideshow .meta * {
        font-size: 10px !important;
        line-height: 15px !important;
    }
}

Thanks so much!!