Jump to content

slideshow title and description on mobile

Recommended Posts

@JoeGrima Try adding to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.sqs-lightbox-meta {
    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

@JoeGrima REmove above, and try this

@media screen and (max-width: 640px) {
.sqs-lightbox-meta {
    opacity: 1 !important;
    bottom: 30% !important;
    left: 10% !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

@FrancesMc Add to Home > Design > Custom CSS

@media screen and (max-width:480px) {
.sqs-gallery-block-slideshow .meta {
    display: block !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

@FrancesMc Please "Like" if the answer is correct

Remove above and add this

@media screen and (max-width:480px) {
/* Show description */
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
/* Font size */
.sqs-gallery-block-slideshow .meta * {
    font-size: 12px !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
11 minutes ago, tuanphan said:

@FrancesMc Please "Like" if the answer is correct

Remove above and add this


@media screen and (max-width:480px) {
/* Show description */
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
/* Font size */
.sqs-gallery-block-slideshow .meta * {
    font-size: 12px !important;
}
}

 

Well you're just awesome - this works perfectly - thank you!

Link to comment

I’m afraid it still does not work for me.  I am noticing that when I open a picture in a gallery, there is actually a small dot in the bottom right corner. Once that dot is tapped, the caption appears.  

It is however very difficult to tap it because on iPhone, the gesture is interpreted as an attempt to close or move the app. Screenshot attached.79EE382D-CB0C-4FD5-8661-71888E0204AB.thumb.jpeg.8ae4f11e775ddf7f4839a1456006a494.jpeg8A7E6E46-D3FD-4D05-87F1-6E653D2F5BA0.thumb.png.6a83837ffe9fd3a7b010af30e46ae47d.png

Link to comment
  • 1 month later...
On 10/24/2019 at 8:11 AM, tuanphan said:

@FrancesMc Please "Like" if the answer is correct

Remove above and add this


@media screen and (max-width:480px) {
/* Show description */
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
/* Font size */
.sqs-gallery-block-slideshow .meta * {
    font-size: 12px !important;
}
}

 

This worked like magic! I've been trying to figure it out forever! Thank you so much!

Link to comment
  • 3 months later...
  • 2 years later...
On 10/24/2019 at 5:11 AM, tuanphan said:

@FrancesMc Please "Like" if the answer is correct

Remove above and add this

@media screen and (max-width:480px) {
/* Show description */
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
/* Font size */
.sqs-gallery-block-slideshow .meta * {
    font-size: 12px !important;
}
}

 

Hi @tuanphan, I remembered that you had shared a similar solution for me for the gallery block in the past, so I applied it to my new page that was not showing the meta text captions on mobile. It worked great, but for some reason, when the slide automatically changes, the caption on the next slide gets bumped to the right and gets squished. If I click the back arrow, it looks fine, but on automatic slide it is skewed right. It is fine in preview mode, but then is skewed on my actual phone. Not sure why the display:block is affecting this, please help!

My URL: https://www.youbelongsd.com/membership-page (it is the gallery block lower down on the page, in the section called "Member Spotlight)

Hey, I'm Jin (he/him). I'm a front end dev learning to make custom sites in Squarespace.

If you find my suggestions helpful, please upvote & like!😺

 

Link to comment
On 1/21/2023 at 6:09 AM, jinlikegold said:

Hi @tuanphan, I remembered that you had shared a similar solution for me for the gallery block in the past, so I applied it to my new page that was not showing the meta text captions on mobile. It worked great, but for some reason, when the slide automatically changes, the caption on the next slide gets bumped to the right and gets squished. If I click the back arrow, it looks fine, but on automatic slide it is skewed right. It is fine in preview mode, but then is skewed on my actual phone. Not sure why the display:block is affecting this, please help!

My URL: https://www.youbelongsd.com/membership-page (it is the gallery block lower down on the page, in the section called "Member Spotlight)

I don't see Member Spotlight. Can you take a screenshot?

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/26/2023 at 4:55 AM, tuanphan said:

I don't see Member Spotlight. Can you take a screenshot?

Hi there, sorry about the delay. Here is a screenshot. Somehow the caption issue seems better on desktop, but it is still happening on mobile (switching back and forth between centered and off to the right. The image is also off center on most smaller screen sizes.

And the URL again:

https://www.youbelongsd.com/membership-page

Thank you!

Screenshot (95).png

IMG_2437.jpg

IMG_2438.jpg

Hey, I'm Jin (he/him). I'm a front end dev learning to make custom sites in Squarespace.

If you find my suggestions helpful, please upvote & like!😺

 

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.