Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Kristata

slideshow title and description on mobile

Question

does anyone know the coding of how i can have the title and description of my slideshow gallery block display on mobile? thanks.

 

Edited by Kristata

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 1

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

 


Send me a message if you have any questions (free 10 minutes)

Free code: Squarespace 7.0 (4000+ code)

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

I have the same issue with a website for a friend of mine who is an artist. The details of his paintings do not show on mobile, when tapping in an image to open in lightbox.

Share this post


Link to post
  • 0

@JoeGrima Try adding to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.sqs-lightbox-meta {
    opacity: 1 !important;
}
}

 


Send me a message if you have any questions (free 10 minutes)

Free code: Squarespace 7.0 (4000+ code)

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0
4 hours ago, tuanphan said:

@JoeGrima Try adding to Home > Design > Custom CSS


@media screen and (max-width:640px) {
.sqs-lightbox-meta {
    opacity: 1 !important;
}
}

 

Tried this but doesn't seem to have any effect

Share this post


Link to post
  • 0

@JoeGrima REmove above, and try this

@media screen and (max-width: 640px) {
.sqs-lightbox-meta {
    opacity: 1 !important;
    bottom: 30% !important;
    left: 10% !Important;
}}

 


Send me a message if you have any questions (free 10 minutes)

Free code: Squarespace 7.0 (4000+ code)

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0

@FrancesMc Add to Home > Design > Custom CSS

@media screen and (max-width:480px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
}

 


Send me a message if you have any questions (free 10 minutes)

Free code: Squarespace 7.0 (4000+ code)

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post
  • 0
6 minutes ago, tuanphan said:

@FrancesMc Add to Home > Design > Custom CSS


@media screen and (max-width:480px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
}

 

Thanks for this. It works but text is too large so cropped. 

Share this post


Link to post
  • 0
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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
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!

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...