Jump to content

Image Caption Overlay to display in mobile view

Recommended Posts

Site URL: http://tidypants.com

site pass: pantstidy

I am having trouble making my quotes display in mobile view. Check out home page using desktop view, scroll down, and you will see images (same image) displaying in slideshow mode with quotes (using image captions). When you view in mobile, the quotes disappear. I would like them to appear on all views (mobile, desktop, tablet).  This is mojave template. Can anybody help?

Thanks in advance!

Link to comment
  • Replies 5
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage .sqs-gallery-block-slideshow .meta {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
}
.sqs-gallery-block-slideshow .meta * {
    font-size: 15px !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
  • 8 months later...
  • 5 months later...

@tuanphan you're like a god on here. 

I'm having a similar problem displaying captions for my gallery images on a mobile. My site is 7.0 Brine. Here's a link:

https://caper-iguana-7g35.squarespace.com/ingredients-gallery-brine

(At the moment there are only captions for the first two images)

I already used your code to shift the captions to below the images when displayed on a desktop (works a treat thank you) but I'd like the same thing on a mobile.  (As things stand the captions don't appear at all on my mobile and none of the suggested code seems to make them appear)

Many thanks in advance. 

Benjamin

Edited by BenjaminHope
Link to comment
On 8/12/2021 at 10:15 PM, BenjaminHope said:

@tuanphan you're like a god on here. 

I'm having a similar problem displaying captions for my gallery images on a mobile. My site is 7.0 Brine. Here's a link:

https://caper-iguana-7g35.squarespace.com/ingredients-gallery-brine

(At the moment there are only captions for the first two images)

I already used your code to shift the captions to below the images when displayed on a desktop (works a treat thank you) but I'd like the same thing on a mobile.  (As things stand the captions don't appear at all on my mobile and none of the suggested code seems to make them appear)

Many thanks in advance. 

Benjamin

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.collection-type-gallery .sqs-system-gallery .slide-meta {
    display: block !important;
    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

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.