mobile mode text

Site URL: https://potato-sphere-g3k8.squarespace.com/config/

Hi! 

how do I make the black background of the text not appear the full size of these images in mobile only? I would like the black background/text to be just the size of the text and not the full image in mobile only! Thanks!!! @tuanphan

Website: https://naonow.com/about

Add Code Block > Insert code

<style>
  @media screen and (max-width:767px) {
figcaption.image-caption-wrapper {
    height: 50% !important;
}
}
</style>

Thanks, @tuanphan ! I added that code here but it doesn't work! Did I do something wrong? Thanks!!

https://naonow.squarespace.com/config/design

https://naonow.com/about

Edited 11 minutes ago by rachelt

Try adding to Code Injection > Header

@media screen and (max-width:767px) {
/* about page */
body#collection-5e80eb1963d7965a88b364c4 .image-block figcaption.image-caption-wrapper {
    max-height: unset !important;
    height: 50% !important;
}
}

Still no luck 😞 @tuanphan

forgot, missing tag, add this

<style>
    @media screen and (max-width:767px) {
/* about page */
body#collection-5e80eb1963d7965a88b364c4 .image-block figcaption.image-caption-wrapper {
    max-height: unset !important;
    height: 50% !important;
}
}
</style>
  

That worked perfectly!!! thank you SO much @tuanphan!!!  Is there a way to add an animation for these boxes/ images so that the box of text appears after a few seconds or slides up?

No simple way

Ok, thanks!!