2Hands

Hi Tuanphan,

You nailed it! It worked!

Thanks so much for your help! I appreciate your time and talent!

Sending best from NYC!

Hi Tuanphan,

Thanks for your response! 🙏🏻

Here's the code I'm using:

.gallery-caption-grid-strips {
  background-color: rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
  padding: 20px 50px;
  max-width: 100%;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  text-align: center;
  transform: translateY(100%);
  transition: transform .0s;
}
.gallery-section .gallery-caption.gallery-caption-grid-strips p {
  font-family: 'Poppins';
  font-size: 12px;
  font-weight: normal;
  text-transform: none;
}
.gallery-strips-item {
  overflow: hidden;
}
.gallery-strips-item:hover .gallery-caption-grid-strips {
  transform: none;
}
.yui3-lightbox2 .sqs-lightbox-meta { 
opacity: 1 !important; 
background: rgba(0, 0, 0, 0.7) !important; 
}

Hey Squarespacers! Happy new year - hope everyone is well 🙏🏻

The page in question is: two-hander.com/work The template is Balboa, SS 7.1, the images in questions are in a Strips Gallery.

The issue is that captions display terribly on mobile devices. I've added custom code to the page in order to achieve a hover-overlay effect for the caption/description for each image and it works beautifully on Desktops but on mobile devices the text is too faint, some times misplaced, sometimes not appearing, etc - it's too inconsistent.

Is there any CSS that would enable the captions/descriptions to be static and automatically appearing for mobile devices only?

Thanks everyone! Cheers!