slideshow title and description on mobile

does anyone know the coding of how i can have the title and description of my slideshow gallery block display on mobile? thanks.

I have the same issue with a website for a friend of mine who is an artist. The details of his paintings do not show on mobile, when tapping in an image to open in lightbox.

@JoeGrima If you share site url, i can take a look

8 hours ago, tuanphan said:

@JoeGrima If you share site url, i can take a look

Of course, this is the site: https://www.nathanaeltheuma.com/gallery#/figurative/

Once you open the picture, the details come up, but the same does not happen on mobile.

@JoeGrima Try adding to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.sqs-lightbox-meta {
    opacity: 1 !important;
}
}

No luck on iPhone I’m afraid.

I have attached a screenshot

Same problem here https://www.jillkoy.com/find-a-candidate - descriptions don't show, Brine template.

4 hours ago, tuanphan said:

@JoeGrima Try adding to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.sqs-lightbox-meta {
    opacity: 1 !important;
}
}

 

Tried this but doesn't seem to have any effect

@JoeGrima REmove above, and try this

@media screen and (max-width: 640px) {
.sqs-lightbox-meta {
    opacity: 1 !important;
    bottom: 30% !important;
    left: 10% !Important;
}}

@FrancesMc Add to Home > Design > Custom CSS

@media screen and (max-width:480px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
}

6 minutes ago, tuanphan said:

@FrancesMc Add to Home > Design > Custom CSS

@media screen and (max-width:480px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
}

 

Thanks for this. It works but text is too large so cropped. 

@FrancesMc Please "Like" if the answer is correct

Remove above and add this

@media screen and (max-width:480px) {
/* Show description */
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
/* Font size */
.sqs-gallery-block-slideshow .meta * {
    font-size: 12px !important;
}
}

11 minutes ago, tuanphan said:

@FrancesMc Please "Like" if the answer is correct

Remove above and add this

@media screen and (max-width:480px) {
/* Show description */
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
/* Font size */
.sqs-gallery-block-slideshow .meta * {
    font-size: 12px !important;
}
}

 

Well you're just awesome - this works perfectly - thank you!

@FrancesMc "Like" (heart icon, bottom right) if the answer is correct. Thanks.

I’m afraid it still does not work for me.  I am noticing that when I open a picture in a gallery, there is actually a small dot in the bottom right corner. Once that dot is tapped, the caption appears.  

It is however very difficult to tap it because on iPhone, the gesture is interpreted as an attempt to close or move the app. Screenshot attached.

On 10/24/2019 at 8:11 AM, tuanphan said:

@FrancesMc Please "Like" if the answer is correct

Remove above and add this

@media screen and (max-width:480px) {
/* Show description */
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
/* Font size */
.sqs-gallery-block-slideshow .meta * {
    font-size: 12px !important;
}
}

 

This worked like magic! I've been trying to figure it out forever! Thank you so much!

The solution I found to work is... 

.index-gallery .description {
   display: block !important
}

On 10/24/2019 at 5:11 AM, tuanphan said:

@FrancesMc Please "Like" if the answer is correct

Remove above and add this

@media screen and (max-width:480px) {
/* Show description */
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
/* Font size */
.sqs-gallery-block-slideshow .meta * {
    font-size: 12px !important;
}
}

 

Hi @tuanphan, I remembered that you had shared a similar solution for me for the gallery block in the past, so I applied it to my new page that was not showing the meta text captions on mobile. It worked great, but for some reason, when the slide automatically changes, the caption on the next slide gets bumped to the right and gets squished. If I click the back arrow, it looks fine, but on automatic slide it is skewed right. It is fine in preview mode, but then is skewed on my actual phone. Not sure why the display:block is affecting this, please help!

My URL: https://www.youbelongsd.com/membership-page (it is the gallery block lower down on the page, in the section called "Member Spotlight)

On 1/21/2023 at 6:09 AM, jinlikegold said:

Hi @tuanphan, I remembered that you had shared a similar solution for me for the gallery block in the past, so I applied it to my new page that was not showing the meta text captions on mobile. It worked great, but for some reason, when the slide automatically changes, the caption on the next slide gets bumped to the right and gets squished. If I click the back arrow, it looks fine, but on automatic slide it is skewed right. It is fine in preview mode, but then is skewed on my actual phone. Not sure why the display:block is affecting this, please help!

My URL: https://www.youbelongsd.com/membership-page (it is the gallery block lower down on the page, in the section called "Member Spotlight)

I don't see Member Spotlight. Can you take a screenshot?

On 1/26/2023 at 4:55 AM, tuanphan said:

I don't see Member Spotlight. Can you take a screenshot?

Hi there, sorry about the delay. Here is a screenshot. Somehow the caption issue seems better on desktop, but it is still happening on mobile (switching back and forth between centered and off to the right. The image is also off center on most smaller screen sizes.

And the URL again:

https://www.youbelongsd.com/membership-page

Thank you!