Display slide text in slideshow on mobile

Site URL: https://jensegger.com

I'm using the Margot template. I've created a slideshow block using an existing gallery of photos. Each photo allows for a title and descriptive text. I've added this to each image which on desktop and tablet, displays the image with the text overlaid.

On mobile, the text is not visible. I've snooped around the settings but don't see any configs for adapting this. Does anyone have any suggestions? I dug around a little bit in the browsers developer console trying to find some obstructing code but have yet to find what I need.

Thanks,

add to home > Design > Custom CSs

@media screen and (max-width:480px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
.meta-title {
    font-size: 20px !Important;
}
.meta-description * {
    font-size: 10px !important;
}
}

Thank you @tuanphan! This worked right away 🙂 

I'm having the same issue but have zero idea how to do the coding change.

On 8/19/2020 at 11:00 AM, JT0987654321 said:

I'm having the same issue but have zero idea how to do the coding change.

Try using above code, if it doesn't work, share link to your site, we can check easier.

Worked in a jiffy for me! Thanks so much for posting this hear!

Hello! I am having a similar issue with image descriptions not displaying on mobile. I am using the Avenue template, and have a few image galleries linked to display in a portfolio index with the description text set to display when hovered over. 

Here is my site: https://www.eleanorgreer.com/

Thank you!

14 hours ago, EGreer said:

Hello! I am having a similar issue with image descriptions not displaying on mobile. I am using the Avenue template, and have a few image galleries linked to display in a portfolio index with the description text set to display when hovered over. 

Here is my site: https://www.eleanorgreer.com/

Thank you!

Hi. Can you share link to exact page? We can help easier

Here is the exact page: https://www.eleanorgreer.com/work#/painting/

14 hours ago, EGreer said:

Here is the exact page: https://www.eleanorgreer.com/work#/painting/

Add to Design > Custom CSS

/* show lightbox caption */
@media screen and (max-width:640px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    background: rgba(0,0,0,0.5);
}
}

Thank you for this, I have added this code as indicated to Design>Custom CSS but my image descriptions still do not show on mobile. Again, they are set to display on "hover" and I am referring to the images once they are clicked on and they appear in a lightbox. Here is the page I am I referring to: https://www.eleanorgreer.com/work#/painting/

On 1/29/2021 at 6:18 AM, EGreer said:

Thank you for this, I have added this code as indicated to Design>Custom CSS but my image descriptions still do not show on mobile. Again, they are set to display on "hover" and I am referring to the images once they are clicked on and they appear in a lightbox. Here is the page I am I referring to: https://www.eleanorgreer.com/work#/painting/

Try new code

/* show lightbox caption */
@media screen and (max-width:640px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    background: rgba(0,0,0,0.5);
}
.yui3-lightbox2 .sqs-lightbox-meta.overlay-description-visible {
    bottom: 5px !important;
}
}

Thank you for your help, the image description now appears on mobile! Much appreciated 🙂 

Since I am here, may I ask if you know of any way to have the ability to zoom in on images, in lightbox, in the Avenue template? Since mine is an art portfolio, I wish this feature existed. That same portfolio page is a good example: https://www.eleanorgreer.com/work#/painting/

On 2/4/2021 at 2:48 PM, EGreer said:

Thank you for your help, the image description now appears on mobile! Much appreciated 🙂 

Since I am here, may I ask if you know of any way to have the ability to zoom in on images, in lightbox, in the Avenue template? Since mine is an art portfolio, I wish this feature existed. That same portfolio page is a good example: https://www.eleanorgreer.com/work#/painting/

Hi. Impossible without custom code (I have also no idea to do this)

14 hours ago, tuanphan said:

Hi. Impossible without custom code (I have also no idea to do this)

Just thought I would ask, Thank you for all your help with the image descriptions! 🙂 

Hi! I'm trying to do this on a version 7.0 Brine template but can't get it to work. Would you be able to help? 

I'm having the problem on this page: www.nationaltab.com

7 hours ago, meganntab said:

Hi! I'm trying to do this on a version 7.0 Brine template but can't get it to work. Would you be able to help? 

I'm having the problem on this page: www.nationaltab.com

 

Add to Design > Custom CSS

/* Mobile-Slideshow title */
@media screen and (max-width:640px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
}

On 6/11/2021 at 9:27 PM, tuanphan said:

Add to Design > Custom CSS

/* Mobile-Slideshow title */
@media screen and (max-width:640px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
}

 

That worked - thank you!

I'm having trouble displaying the text on the slideshow as well. It works fine on my computer, but it won't show up on mobile. I have Brine 7.0 version; here's the website: https://www.chromemediagroup.com/

On 8/13/2021 at 12:24 AM, chromemediagroup said:

I'm having trouble displaying the text on the slideshow as well. It works fine on my computer, but it won't show up on mobile. I have Brine 7.0 version; here's the website: https://www.chromemediagroup.com/

Hi. Try adding to Design > Custom CSS

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

On 8/15/2021 at 12:12 AM, tuanphan said:

Hi. Try adding to Design > Custom CSS

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

 

Thank you!!! It only displays the full text when it's on landscape mode, but I think that should be fine 🙂  

On 6/12/2021 at 9:27 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile-Slideshow title */
@media screen and (max-width:640px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
}

 

I have tried this on 7.0 brine but will only show on mobile if In landscape, I had it working on my site for a couple of years but accidentally reset my site styles and now can’t get it to work again.

www.skinandbodyclinic.com.au 

now just the image from the slideshow displays without the text overlay

On 3/8/2022 at 7:22 PM, ErinO said:

I have tried this on 7.0 brine but will only show on mobile if In landscape, I had it working on my site for a couple of years but accidentally reset my site styles and now can’t get it to work again.

www.skinandbodyclinic.com.au 

now just the image from the slideshow displays without the text overlay

It looks like you solved it?

Hi, I've tried al these solutions but no luck getting the image descriptions to show on mobile in portrait mode
I'm using the Pacific Template.
https://tarantula-bison-ewdf.squarespace.com

thanks

Simon

On 4/19/2022 at 5:49 AM, simon1 said:

Hi, I've tried al these solutions but no luck getting the image descriptions to show on mobile in portrait mode
I'm using the Pacific Template.
https://tarantula-bison-ewdf.squarespace.com

thanks

Simon

The site is private. Can you setup password & share url again?