Always show caption lightbox mobile

When using lightbox, i have a small dot in the bottom to show captions (within the image). however, it is too small and nobody can find it. is there a special css code to always show the caption when opened in lightbox?

Hey,

I was having the same issue on my site so I thought I'd share my solution in case it helps someone else.

As the dot is a link, I didn't want to mess around with any Javascript to automatically activate it. Instead I gave it a background colour and then rounded it to make it look like a bigger dot.

Here's the code to be added in Design > Custom CSS:

.sqs-lightbox-meta-trigger {
 background-color: #000;
 border-radius: 50%;
}

Hope it'll help someone!

I tried the above Custom CSS and it didn't do anything?

@vic18t

Try changing the padding to expand the active area for the button:
.sqs-lightbox-meta-trigger { padding-top: 15% !important; padding-left: 90% !important; }

Increase size and add a new color if you want the dot to stand out (replace "red" with your color code ex: #bcbcbc):
.sqs-lightbox-meta-trigger { padding-top: 15% !important; padding-left: 90% !important; color: red !important; font-size: 3em !important; }

Let me know if that works.

Thank you @Vic18t - that worked perfectly! Any chance you also know how to change that dot into a text that reads "more info" instead of just the dot? Seems like an easy adjustment but I can't figure it out. 

On 3/10/2020 at 10:46 PM, mpressgranger said:

Thank you @Vic18t - that worked perfectly! Any chance you also know how to change that dot into a text that reads "more info" instead of just the dot? Seems like an easy adjustment but I can't figure it out. 

If you share link to your site. I can take a look

Hello! 

I'd also love to know how to change the dot to text : "INFO" 

Thanks so much! -JA 

I found something like this on another post. Can't find it now, but thought I'd ad it here if it's any help.

a.sqs-lightbox-meta-trigger {
    width: 100% !important;
    visibility: hidden;
    font-size:15px !important;
    color: #DEB74E !important;
}
a.sqs-lightbox-meta-trigger:before {
    content: "Tap For More Info";
    visibility: visible;
}

***

Second option.
Shows captions all the time, NO click/tap for more.

// Shows the captions all the time
.sqs-lightbox-meta.overlay-description-visible {
 bottom: 0px !important;
}

// Hide the "dot" I'm using the Dark lightbox, so I color the dot dark, which blends in with the background.
a.sqs-lightbox-meta-trigger {
    color:#111 !important;
}

On 8/2/2020 at 2:54 AM, gsimms said:

***

Second option.
Shows captions all the time, NO click/tap for more.

// Shows the captions all the time
.sqs-lightbox-meta.overlay-description-visible {
 bottom: 0px !important;
}

// Hide the "dot" I'm using the Dark lightbox, so I color the dot dark, which blends in with the background.
a.sqs-lightbox-meta-trigger {
    color:#111 !important;
}

Awesome ! It worked for me 😉 

Thanks !

Thanks, folks. This fixed my issue. Both of the following options worked for me, but I decided to go with captions always on in the end. Here's the code I used in Brine:

//change dot to open captions on mobile//

.sqs-lightbox-meta-trigger {
padding-top: 25% !important;
padding-left: 90% !important;
color: #C1D32F !important;
font-size: 1em !important;
font-family: 'BikoBold'!important;
margin-right:50px;
margin-bottom:50px;}

a.sqs-lightbox-meta-trigger:before {
content: "Click here";      
visibility: visible;}

You could change the colour of the text, font size, font, etc. I also added in margins to move the text a bit up and over from the bottom corner. Obviously, someone could also change Click here to whatever they wanted. 

In the end I went with code from above that just made the captions come up always: 
//Show gallery captions all the time on mobile//
.sqs-lightbox-meta.overlay-description-visible {
 bottom: 0px !important;
}

On 8/2/2020 at 2:54 AM, gsimms said:

***

Second option.
Shows captions all the time, NO click/tap for more.

// Shows the captions all the time
.sqs-lightbox-meta.overlay-description-visible {
 bottom: 0px !important;
}

// Hide the "dot" I'm using the Dark lightbox, so I color the dot dark, which blends in with the background.
a.sqs-lightbox-meta-trigger {
    color:#111 !important;
}

This worked like a charm for me. I am wondering though if anyone knows how to make the caption show at all times on the desktop version too, so there's no need to hover to see the caption in the lightbox?

Thanks!

On 1/17/2022 at 6:32 PM, Dsimons said:

 

This worked like a charm for me. I am wondering though if anyone knows how to make the caption show at all times on the desktop version too, so there's no need to hover to see the caption in the lightbox?

Thanks!

Can you share link to page where you use image? We can check the code to achieve this

5 hours ago, tuanphan said:

Can you share link to page where you use image? We can check the code to achieve this

Thanks! Already fixed the issue

Hello! @Dsimons, I see that you figured out how to do this for desktop... Could you share how you edited the code to achieve that as well? Thank you!

14 hours ago, rudboi3585 said:

Hello! @Dsimons, I see that you figured out how to do this for desktop... Could you share how you edited the code to achieve that as well? Thank you!

Hi @rudboi3585,

I used the following code to show the caption at all times:

/* Always show lightbox caption */
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1!important;
    position: center !important;
    background: rgba(0,0,0,0.5);
}

Let me know if it works 🙂

@tuanphan Hey there! I'm having this issue as well on mobile, but none of the code above is working. Curious if it's due to change in code over time, but would you mind taking a look?

Page: https://californiochocolate.com/cacao-origins

My goal is to have the captions on the gallery images always appear (not just on hover) on both desktop and mobile. TIA!

On 8/17/2023 at 2:17 AM, LemonstrikeCreativeStudios said:

@tuanphan Hey there! I'm having this issue as well on mobile, but none of the code above is working. Curious if it's due to change in code over time, but would you mind taking a look?

Page: https://californiochocolate.com/cacao-origins

My goal is to have the captions on the gallery images always appear (not just on hover) on both desktop and mobile. TIA!

Add to Custom CSS box

/* Show image caption on mobile */
@media screen and (max-width:900px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: rgba(0,0,0,0.7) !important;
    bottom: 10px !important;
}}

On 8/19/2023 at 12:33 AM, tuanphan said:

Add to Custom CSS box

/* Show image caption on mobile */
@media screen and (max-width:900px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: rgba(0,0,0,0.7) !important;
    bottom: 10px !important;
}}

 

@tuanphan Thanks so much! This finally worked 🙂 Have a great week!