How can I get my gallery captions to show on the mobile version?

My gallery captions show up over the image on bottom center on the desktop version, but there are no captions when you switch to the mobile version.

Use this Custom CSS:

@media only screen and (max-width: 800px){
   .sqs-lightbox-meta{
       opacity:1!important;
       z-index:100000001;
       background: rgba(0,0,0,.7);
   }
}

Thanks! I was hoping I'd be able to keep the Mobile display as it was and still display captions. This way kind of works though!

Maybe I'm not placing my code in the correct place because it still is not working :(

Can you post a link to your site?

I believe this might be what you're looking for:

//Testimonial mobile caption fix@media only screen and (max-width: 800px){.collection-type-index.design-slideshow .index-gallery .slide-meta .description {display:block;}}

Try this

/*** DISPLAY GALLERY ON MOBILE CAPTION ***/

.yui3-lightbox2 .sqs-lightbox-meta { opacity: 1 !important; background: rgba(0, 0, 0, 0.7) !important; } @media only screen and (max-width: 1024px){ .yui3-lightbox2 .sqs-lightbox-meta{ bottom: 0px !important; } }

On 3/4/2018 at 1:39 AM, bj5000 said:

Try this

/*** DISPLAY GALLERY ON MOBILE CAPTION ***/

.yui3-lightbox2 .sqs-lightbox-meta { opacity: 1 !important; background: rgba(0, 0, 0, 0.7) !important; } @media only screen and (max-width: 1024px){ .yui3-lightbox2 .sqs-lightbox-meta{ bottom: 0px !important; } }

On 1/24/2017 at 9:36 AM, adederich said:

I believe this might be what you're looking for:

//Testimonial mobile caption fix@media only screen and (max-width: 800px){.collection-type-index.design-slideshow .index-gallery .slide-meta .description {display:block;}}

On 4/2/2015 at 1:02 PM, clayyount said:

Can you post a link to your site?

I am having the same issue here for a client's site. Site minnastess.com pw: minnastesssite

I would like my Slideshow Gallery captions to display on mobile. Any ideas? 

On 6/13/2020 at 2:50 AM, cpotter said:

 

 

I am having the same issue here for a client's site. Site minnastess.com pw: minnastesssite

I would like my Slideshow Gallery captions to display on mobile. Any ideas? 

Add to Last line in Home > Design > Custom CSS

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

On 6/14/2020 at 8:21 AM, tuanphan said:

Add to Last line in Home > Design > Custom CSS

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

This code worked, but it causes the formatting to look like this. Is there a way to make the caption or text smaller and not throw off the spacing of the lines?

On 6/14/2020 at 8:21 AM, tuanphan said:

Add to Last line in Home > Design > Custom CSS

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

 

This worked for me, but the formatting is wonky on mobile when holding the phone vertically. I've attached three examples. Any ideas of how to correct this for mobile vertical view? Thank you so much!

@tuanphan I have the same issue for a site. https://playseum-trial.squarespace.com/ 

pw: playseumafb

I have added the following code but the text doesn't display properly on all the images and also overlaps with the arrows on the sides. Can you pls help me fix it? Thank you.

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

@tuanphan can you please advise me this

2 hours ago, atfirstblink said:

@tuanphan can you please advise me this

Where is gallery?

@tuanphan https://playseum-trial.squarespace.com/exhibits 

2 minutes ago, atfirstblink said:

@tuanphan https://playseum-trial.squarespace.com/exhibits 

Try to Design > Custom CSS

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

@tuanphan tried this CSS it doesn't seem to be working though. Can you pls check. Is there a way I can display the text under the banner instead of on it? Maybe that will make it better in the mobile view.

On 6/23/2023 at 5:28 PM, atfirstblink said:

@tuanphan https://playseum-trial.squarespace.com/exhibits 

playseumafb

password is incorrect

@tuanphan sorry the pw is: playseum 

https://playseum-trial.squarespace.com/exhibits

I've shifted to summary blocks for the said issue. However I need help with the following:

1. Why are some of the content images sliding up and the rest not and how do i fix it?

2. How do I get the arrows up in the desktop view so that they sit in the centre of the image and not towards the bottom

3. Can I make the circles and arrows smaller than they are right now for the mobile view?

Please help. Thank you.

12 minutes ago, Afak said:

 This might be what you're looking for:

//Testimonial mobile caption fix@media only screen and (max-width: 800px){.collection-type-index.design-slideshow .index-gallery .slide-meta .description {display:block;}}

sorry it says there is a syntax error with this code.

21 hours ago, atfirstblink said:

@tuanphan sorry the pw is: playseum 

https://playseum-trial.squarespace.com/exhibits

 

I've shifted to summary blocks for the said issue. However I need help with the following:

 

1. Why are some of the content images sliding up and the rest not and how do i fix it?

2. How do I get the arrows up in the desktop view so that they sit in the centre of the image and not towards the bottom

3. Can I make the circles and arrows smaller than they are right now for the mobile view?

 

Please help. Thank you.

I see you changed to List Slideshow.

Do you still need help? If yes, which page you use gallery?