Gallery Captions Not Showing on Mobile

Hi there community,

Can anyone help to see what CSS code is needed for my template/journal page to show gallery captions on mobile?

Tried a few CSS codes seen here but with no success so far.

Many thanks in advance!

www.arif-nurhakim.com/journal

Hi,

Which gallery are you referring to?

18 hours ago, tuanphan said:

Hi,

Which gallery are you referring to?

Hi Tuanphan,

I'm referring to my image galleries in the blog post (at the bottom) such as this one:

http://www.arif-nurhakim.com/animal-tripping

Would you know which css code would do the trick?

On 2/12/2023 at 1:47 PM, Arif__Nurhakim said:

Hi Tuanphan,

I'm referring to my image galleries in the blog post (at the bottom) such as this one:

http://www.arif-nurhakim.com/animal-tripping

Would you know which css code would do the trick?

Hi,

The page doesn't exist now. Can you check it again?

On 2/15/2023 at 11:28 AM, tuanphan said:

Hi,

The page doesn't exist now. Can you check it again?

Hi there, my apologies for getting the url link wrong.

This should work: http://www.arif-nurhakim.com/journal/animal-tripping

On 2/17/2023 at 10:30 PM, Arif__Nurhakim said:

Hi there, my apologies for getting the url link wrong.

This should work: http://www.arif-nurhakim.com/journal/animal-tripping

Add to Design > Custom CSS

/* 7.0 Gallery caption mobile */
@media screen and (max-width:900px) {
	.sqs-gallery-block-slideshow .slide.loaded .meta {
    display: block !important;
    left: 0 !Important;
    top: 100px !important;
    width: 100% !Important;
max-width: 100% !important;margin-left: 0 !important;}
.sqs-gallery-block-slideshow .meta .meta-title {
    line-height: 20px !important;
}
.meta-inside {
    padding-top: 0 !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
    height: auto !Important;
}}

On 2/20/2023 at 11:29 PM, tuanphan said:

Add to Design > Custom CSS

/* 7.0 Gallery caption mobile */
@media screen and (max-width:900px) {
	.sqs-gallery-block-slideshow .slide.loaded .meta {
    display: block !important;
    left: 0 !Important;
    top: 100px !important;
    width: 100% !Important;
max-width: 100% !important;margin-left: 0 !important;}
.sqs-gallery-block-slideshow .meta .meta-title {
    line-height: 20px !important;
}
.meta-inside {
    padding-top: 0 !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
    height: auto !Important;
}}

 

Thank you for the codes. It has helped to solve the issue.