Meta (image body) not showing on galleries on mobile

Hi 🙂

I'm trying to force text to display over images in a gallery block, slideshow, on mobile.
The text is in the body/description area of each individual image. I chose this (and left the title blank as the text is already styled a little smaller and subtle). Tile and description are set to show at 'bottom' in the default Squarespace design settings, rather than bottom left, as this showed it without the semi-transparent background. 

I tried to use a bit of CSS I found, but this displays the text halfway up the image. I want it anchored bottomed left over the image.

This is the code I am trying:

/* 7.0 Gallery caption mobile */
@media screen and (max-width:900px) {
	.sqs-gallery-block-slideshow .slide.loaded .meta {
    display: block !important;
    left: 0 !Important;
    top: 100px !important;
    width: 100% !Important;
max-width: 100% !important;margin-left: 0 !important;}
.sqs-gallery-block-slideshow .meta .meta-title {
    line-height: 20px !important;
}
.meta-inside {
    padding-top: 0 !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
    height: auto !Important;
}}

(not a coder)
Thanks in advance!

8 hours ago, martindrake81 said:

Hi 🙂

I'm trying to force text to display over images in a gallery block, slideshow, on mobile.
The text is in the body/description area of each individual image. I chose this (and left the title blank as the text is already styled a little smaller and subtle). Tile and description are set to show at 'bottom' in the default Squarespace design settings, rather than bottom left, as this showed it without the semi-transparent background. 

I tried to use a bit of CSS I found, but this displays the text halfway up the image. I want it anchored bottomed left over the image.

This is the code I am trying:

/* 7.0 Gallery caption mobile */
@media screen and (max-width:900px) {
	.sqs-gallery-block-slideshow .slide.loaded .meta {
    display: block !important;
    left: 0 !Important;
    top: 100px !important;
    width: 100% !Important;
max-width: 100% !important;margin-left: 0 !important;}
.sqs-gallery-block-slideshow .meta .meta-title {
    line-height: 20px !important;
}
.meta-inside {
    padding-top: 0 !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
    height: auto !Important;
}}

 

(not a coder)
Thanks in advance!

Can you share your URL so I can check it?

Thank you 🙂 ....

https://www.madstories.love/about

Sorry, I thought it was included!

26 minutes ago, martindrake81 said:

Thank you 🙂 ....

https://www.madstories.love/about

Sorry, I thought it was included!

 

This code makes the text move up on mobile

You can try the following code to overwrite it

@media screen and (max-width: 900px) {
  #block-450ad8b012331041bce3 .slide.loaded .meta {
    top: unset !important;
  }
}

Let me know how it works on your side

Much gratitude @Beyondspace