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 19
  • 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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.