Mobile Not Displaying Title and Description Text in Galleries

I'm using gallery blocks on this site to display artwork that has titles and descriptions. On mobile, the text is not showing up regardless of the gallery settings. Is there a piece of code that will show the text on mobile?

Thanks!

Hi,

Could you please attach a link to your private/public website so I can take a look?

Best,

Dan

Hi @Wolfsilon, whoops forgot that! It is https://www.catalden.com/work/organza

Thanks!

On 2/7/2023 at 2:16 AM, 2birds said:

Hi whoops forgot that! It is https://www.catalden.com/work/organza

Thanks!

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/10/2023 at 1:03 AM, 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;
}}

 

We're getting there! This is there a way to get the description to stay at the bottom? 

On 2/17/2023 at 4:33 AM, 2birds said:

We're getting there! This is there a way to get the description to stay at the bottom? 

 

Use this new code

/* 7.0 Gallery caption mobile */
@media screen and (max-width:900px) {
	.sqs-gallery-block-slideshow .slide.loaded .meta {
    display: block !important;
    left: 0 !Important;
    bottom: 0px !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;
}}