Image titles within gallery not showing on mobile

Site URL: https://www.mattreynoldsphotography.com/

Hello, hoping someone may be able to help.

I am using the Avenue template.

Have created a grid-gallery for images and have the box checked to open the image larger in a lightbox if clicked.

For the individual images, I have titled each and for some I have a subtitle description area.

On the desktop this works perfectly yet on Mobile my title and subtitle does not show up on the individual images when opened.

On my phone there is a tiny button where I can enable to read it and then it shows but I don't think people will realize and want to force show it below the image each time.  The same way it does on a desktop.  Is there any code I can add to make this happen? 

www.MattReynoldsPhotography.com

Add this code to Home > Design > Custom CSS

.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
}

This reverts the old gallery options incredibly easily. https://www.ghostplugins.com/steps/9ehnk49g

I don't know what changes you have made but it seems to be working fine, I see the same things on desktop and my motoz3. I suggest you add a back to top botton, would make it easier to get to the nav bar from a large gallery. Nice use of Avenue. I use it too: https://www.myrandomviews.com/

I suggest you covert your logo to a png or use a camera icon and load it as a favicon to replace the SS "borg" cube on the browser bar. You will see that I have done that as well. 
 

@tuanphan i have a similar issue using Brine.  i am trying to display the title on slideshow gallery images on mobile, and i can't figure out the class on mobile. it looks fine on desktop, but doesn't show on mobile at all. Screenshots for reference. 

site url: https://grey-armadillo-bdg7.squarespace.com/

password: balch!

this issue is on the homepage.

4 hours ago, christinabalch said:

@tuanphan i have a similar issue using Brine.  i am trying to display the title on slideshow gallery images on mobile, and i can't figure out the class on mobile. it looks fine on desktop, but doesn't show on mobile at all. Screenshots for reference. 

site url: https://grey-armadillo-bdg7.squarespace.com/

password: balch!

this issue is on the homepage.

Add to Design > Custom CSS

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

Hi,

I'm having the same problem on this site- gallery image descriptions are not visible on mobile. I tried the code offered above, but nothing has worked so far.  Here is the page:

https://www.serranogallery.com/rolando-rojas

Any suggestions?

Thanks,
Elizabeth

On 9/19/2021 at 9:34 AM, ElizabethMacLean said:

Hi,

I'm having the same problem on this site- gallery image descriptions are not visible on mobile. I tried the code offered above, but nothing has worked so far.  Here is the page:

https://www.serranogallery.com/rolando-rojas

Any suggestions?

Thanks,
Elizabeth

Add to Design > Custom CSS

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

Thank you, @tuanphan! So helpful!

Hey Guys,

I'm having what I believe to be a pretty similar problem with my site. On the desktop when I hover over the thumbnail images I have the titles pop up which is perfect but on my mobile you can't really hover without a mouse and i'd prefer for the titles just to be there at all times.

However, is it possible to show your titles in two different ways on separate devices? Here's the example of one of the pages i'm trying to sort out. https://jducker.com/promo-1
If you take a look at it on your mobile you'll see what I mean about the whole hovering process not really working. 

Any help would be greatly appreciated!

Solved with

@media screen and (max-width: 767px) {
    div#page-5e4d74c3723f3b201b6ae57e figcaption.image-caption-wrapper,div#page-5e4d98e00c9a2e591ab4d6f5 figcaption.image-caption-wrapper,div#page-5e4d98ee6d9f2254fac4fbd2 figcaption.image-caption-wrapper {
        opacity:1 !important;
        visibility: visible !important;
        position: relative !important;
        padding-top: 5px !important;
        padding-bottom: 0 !important
    }
}

On 1/27/2022 at 2:41 AM, tuanphan said:

Solved with

@media screen and (max-width: 767px) {
    div#page-5e4d74c3723f3b201b6ae57e figcaption.image-caption-wrapper,div#page-5e4d98e00c9a2e591ab4d6f5 figcaption.image-caption-wrapper,div#page-5e4d98ee6d9f2254fac4fbd2 figcaption.image-caption-wrapper {
        opacity:1 !important;
        visibility: visible !important;
        position: relative !important;
        padding-top: 5px !important;
        padding-bottom: 0 !important
    }
}

 

None of the solutions work for me!

https://www.kroschlab.com/people-test

I have all of this CSS code for the lightbox already, although I don't think it is relevant

//in gallery grid, set a hover over slide effect to display slide title on partially transparent overlay
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
  	background-color: rgba(0,0, 0, 0.7);
}

/* Show lightbox caption on mobile */
@media screen and (max-width: 767px) {
    div#page-5e4d74c3723f3b201b6ae57e figcaption.image-caption-wrapper,div#page-5e4d98e00c9a2e591ab4d6f5 figcaption.image-caption-wrapper,div#page-5e4d98ee6d9f2254fac4fbd2 figcaption.image-caption-wrapper {
        opacity:1 !important;
        visibility: visible !important;
        position: relative !important;
        padding-top: 5px !important;
        padding-bottom: 0 !important
    }
}

.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper .image-slide-title {
 position: absolute;
 bottom: 0;  
 width: 100%;
 height: 0;
 color: white;
 background-color: rgba(0, 0, 0, 0.5);
 opacity: 0;
 transition: all .25s ease-in;
}
.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper:hover .image-slide-title {
 height: 20%;
 opacity: .9;
}

On 2/17/2022 at 5:49 AM, noobiedesign said:

None of the solutions work for me!

https://www.kroschlab.com/people-test

 

I have all of this CSS code for the lightbox already, although I don't think it is relevant

//in gallery grid, set a hover over slide effect to display slide title on partially transparent overlay
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
  	background-color: rgba(0,0, 0, 0.7);
}

/* Show lightbox caption on mobile */
@media screen and (max-width: 767px) {
    div#page-5e4d74c3723f3b201b6ae57e figcaption.image-caption-wrapper,div#page-5e4d98e00c9a2e591ab4d6f5 figcaption.image-caption-wrapper,div#page-5e4d98ee6d9f2254fac4fbd2 figcaption.image-caption-wrapper {
        opacity:1 !important;
        visibility: visible !important;
        position: relative !important;
        padding-top: 5px !important;
        padding-bottom: 0 !important
    }
}

.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper .image-slide-title {
 position: absolute;
 bottom: 0;  
 width: 100%;
 height: 0;
 color: white;
 background-color: rgba(0, 0, 0, 0.5);
 opacity: 0;
 transition: all .25s ease-in;
}
.sqs-gallery.sqs-gallery-design-grid .slide 
.margin-wrapper:hover .image-slide-title {
 height: 20%;
 opacity: .9;
}

 

Currently, click dot in bottom right >> show lightbox

You want

(1) Increase dot size + color + add an explain text?

OR

(2) Always show caption with overlay?

8 hours ago, tuanphan said:

Currently, click dot in bottom right >> show lightbox

You want

(1) Increase dot size + color + add an explain text?

OR

(2) Always show caption with overlay?

Hi, thanks for your response.

Dot on the bottom right of what/where?

On 2/19/2022 at 4:50 AM, noobiedesign said:

Hi, thanks for your response.

Dot on the bottom right of what/where?

Open on mobile > Click dot on bottom right > you will see caption show up

Hi am having similar issues and nothing on here suits what I am looking for but I would be interested to know how I can Increase dot size + colour + add an explain text.

That I think would be an ideal solution for me on mobile.

On 3/1/2022 at 5:22 PM, Angelo-1970 said:

Hi am having similar issues and nothing on here suits what I am looking for but I would be interested to know how I can Increase dot size + colour + add an explain text.

That I think would be an ideal solution for me on mobile.

The above link doesn't exist. Can you share link to gallery on your site?

I am having issues with descriptions being visible in mobile. This code worked to make them visible but its cutting off the descriptions 😕 here is the site for reference https://www.shaktiyogaathens.com/beginner

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

On 1/6/2023 at 1:23 AM, shakti29 said:

I am having issues with descriptions being visible in mobile. This code worked to make them visible but its cutting off the descriptions 😕 here is the site for reference https://www.shaktiyogaathens.com/beginner

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

Edit this

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

to this

/* Mobile gallery title */
@media screen and (max-width:640px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
    opacity: 1 !important;
    bottom: -50px !important;
    height: auto !important;
    max-width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
}
}

On 1/8/2023 at 3:10 AM, tuanphan said:

Edit this

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

to this

/* Mobile gallery title */
@media screen and (max-width:640px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
    opacity: 1 !important;
    bottom: -50px !important;
    height: auto !important;
    max-width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
}
}

 

Hello! Same issue. Image titles and descriptions don't show up on mobile and tablet. Site url: www.burcugokcek.com

Appreciate the help!

Same issue here on:  koenigsblau.squarespace.com

On 1/13/2023 at 3:51 AM, Burcu said:

Hello! Same issue. Image titles and descriptions don't show up on mobile and tablet. Site url: www.burcugokcek.com

Appreciate the help!

Add this to Design > Custom CSS

/* Show image caption */
@media screen and (max-width:900px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    background-color: rgba(0,0,0,0.4);
    bottom: 100px !important;
    left: 0 !important;
    right: 0 !important;
}
}

On 2/28/2023 at 11:37 PM, cade said:

Same issue here on:  koenigsblau.squarespace.com

 

Posted January 12

  On 1/8/2023 at 1:10 AM, tuanphan said:

Edit this

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

to this

/* Mobile gallery title */
@media screen and (max-width:640px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
    opacity: 1 !important;
    bottom: -50px !important;
    height: auto !important;
    max-width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
}
}

 

Hello! Same issue. Image titles and descriptions don't show up on mobile and tablet. Site url: www.burcugokcek.com

Appreciate the help!

What is password?

I’m having the same problem with my gallery not showing the titles on mobile. None of the code has worked for me so far. 
site: 

https://www.artbynickadams.com/paintings

10 hours ago, Discountmando said:

I’m having the same problem with my gallery not showing the titles on mobile. None of the code has worked for me so far. 
site: 

https://www.artbynickadams.com/paintings

Use this CSS code

@media screen and (max-width:767px) {
.collection-type-gallery #slideshowWrapper .image-description {
    display: block !important;
}
}

On 12/1/2023 at 10:09 PM, tuanphan said:

Use this CSS code

@media screen and (max-width:767px) {
.collection-type-gallery #slideshowWrapper .image-description {
    display: block !important;
}
}

 

that only worked for the image on the very bottom of the page on mobile. when I tilt the phone sideways it looks like more titles appear but they are all on top of each other