Jump to content

Title not appearing on mobile video grid gallery

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://tuatara-mandarin-t25h.squarespace.com

I am pretty happy with how my desktop site is looking, but the mobile isn't working well for the gallery grid. On the desktop, I am able to hover and see the title text, but on mobile, it just shows a play button with no title or description anywhere. Id like to have the title on the video (so people know what they are clicking on) or below the video.  I think I'm using the gallery block grid on the previous version of squarespace. And I did add custom video thumbnails to each video

Any help would be greatly appreciated!

tuatara-mandarin-t25h.squarespace.com

Password:12345

 

665550533_ScreenShot2021-10-06at2_32_31PM.thumb.png.04782567c6138baa9735cd6657074cf6.png

IMG_2969.PNG

Link to comment
  • Solution

Add to Design > Custom CSS

@media screen and (max-width:900px) {
.collection-type-gallery #slideshowWrapper .image-description {
    display: block !important;
    position: static !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
  • 6 months later...
On 4/9/2022 at 4:13 AM, jmselva said:

Hi tuanphan. Hi I am having the same problem as Chazzzzer, but contrary to him, this does not seem to work, though I pasted the code there Add to Design > Custom CSS. Any idea what may go wrong here ? What I would like is that on the mobile version the title of the video appears when one puts the finger on the image. Like in this site here : https://edmoorebsc.com/featured Thanks a lot in advance.

Use this new code

@media screen and (max-width:900px) {
.project-cover .details-wrap {
    opacity: 1 !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 4/10/2022 at 5:35 AM, tuanphan said:

Use this new code

@media screen and (max-width:900px) {
.project-cover .details-wrap {
    opacity: 1 !important;
}
}

 

Hi tuanphan. Thank you so much for trying to help. But sadly, it still does not work... I pasted the code in the CSS window, saved and reloaded the site, but it still does not work. On the laptop, when I check the site in mobile phone mode, the titles of the videos do appear, but on the actual cell phone, they do not appear as I put my finger on the windows. Any other idea ? Thanks a lot !!! JM 🙂

Link to comment
13 hours ago, jmselva said:

Hi tuanphan. Thank you so much for trying to help. But sadly, it still does not work... I pasted the code in the CSS window, saved and reloaded the site, but it still does not work. On the laptop, when I check the site in mobile phone mode, the titles of the videos do appear, but on the actual cell phone, they do not appear as I put my finger on the windows. Any other idea ? Thanks a lot !!! JM 🙂

Can you add & Keep the code? We will check it again easier

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...
On 5/17/2022 at 3:28 AM, jmselva said:

Hi Tuanphan. I added and kept the code in. It still does not work. Any idea ? Thanks in advance. JM

Try this new code

@media only screen and (max-width:640px) {
.project-cover .details-wrap {
    opacity: 1 !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 5/20/2022 at 4:31 AM, tuanphan said:

Try this new code

@media only screen and (max-width:640px) {
.project-cover .details-wrap {
    opacity: 1 !important;
}
}

 

Just did tuanphan. Still no luck... Was I supposed to replace the code you gave me before or add this one to it ? I replaced it and it does work for now. Thanks again.

Link to comment
On 5/26/2022 at 12:01 AM, jmselva said:

Just did tuanphan. Still no luck... Was I supposed to replace the code you gave me before or add this one to it ? I replaced it and it does work for now. Thanks again.

Can you keep the code? I will try testing again on real device

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

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.