Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Always show caption lightbox mobile


Question

  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

10 answers to this question

Recommended Posts

  • 0

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!

Link to comment
  • 0

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

Edited by C-A
Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Link to comment
  • 0

***

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

Link to comment
  • 0
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 !

Link to comment
  • 0

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

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