Carousel Gallery title and description not showing on mobile

Hi, 

I have a carousel gallery block that has titles and descriptions overlayed on desktop (see screengrab).

They vanish on mobile (see screengrab).

I need help with:
- Make the title & description always visible on the image or below the image for mobile
- Remove the row of thumbnails on mobile

https://vanilla-sawfish-kk9x.squarespace.com/meditations-1

Thanks as always,
Laura

Remove thumbnails will create a white gap

Use this CSS code

@media screen and (max-width:767px) {
    div.sqs-gallery-thumbnails {
    display: none !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
    z-index: 10000 !important;
    bottom: -160px!important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    left: 0 !important;
    text-align: center !important;
    display: block !important;
}
.meta * {
    color: black !important;
}
.sqs-gallery-design-stacked-slide {
    overflow: visible !important;
}
}

I'm having the same issue with image descriptions on mobile! I've double-checked all the settings, and I've even used a few small codes in the CSS to try and force the descriptions to be viewed, but nothing is working. 

If I find something that does work I will reply it here. This is a pretty significant bug that Squarespace needs to adderss.

I found something that worked for me! 

I found the below code on another forum and gave it a try and it worked to force the image description and title to appear on mobile viewing.

If your gallery is a carousel rather than a slideshow, you will likely need to replace "slideshow" with "carousel" in the code snippet. 

Here's the link to the forum I got the code from: 

/* Mobile gallery title */
@media screen and (max-width:640px) {
.sqs-gallery-block-slideshow .meta {
    display: block !important;
    opacity: 1 !important;
    bottom: -15px !important;
    height: auto !important;
    max-width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
}
}

Thanks for responses but I have actually changed my mind and think for what I need a grid is better.

I haven't attempted this since I don't have a grid gallery, but you can try the code below if you're still needing a solution.

 

/* Mobile gallery title */
@media screen and (max-width:640px) {
    .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-title,
    .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-meta {
        display: block !important;
        opacity: 1 !important;
        height: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        position: relative !important;
    }

    .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-title {
        bottom: 0 !important;
    }

    .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-meta {
        bottom: -15px !important;
    }
}
 

@KatieVetter Thanks for your response but I have decided to use a gallery section with the items all on individual cards and that seems to work well as is good for being responsive on mobile.