Image Caption Overlay to display in mobile view

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!

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

@tuanphan

  YOU ARE AWESOME! THANK YOU FOR SOLVING THIS FOR ME! IT WORKED 🙂 EXCELLENT JOB!

@tuanphan Do you have the fix to show the image caption on mobile just for image block on 7.1?

@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

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