Jump to content

Image titles within gallery not showing on mobile

Recommended Posts

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

Link to comment
  • Replies 25
  • Views 6.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 weeks later...

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. 
 

 

Link to comment
  • 1 year later...

@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.

Screen Shot 2021-06-22 at 23.38.25.png

Screen Shot 2021-06-22 at 23.39.20.png

Edited by christinabalch
added template type
Link to comment
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.

Screen Shot 2021-06-22 at 23.38.25.png

Screen Shot 2021-06-22 at 23.39.20.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 2 months later...

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!

Link to comment

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
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
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;
}

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 10 months later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment
  • 1 month later...

Same issue here on:  koenigsblau.squarespace.com

  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!

Link to comment
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

  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?

image.png.7eb7f193d38a7f42fc32ba0f98ee433a.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.