Jump to content

Display Captions for Mobile Only

Go to solution Solved by tuanphan,

Recommended Posts

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!

Link to comment
  • Replies 4
  • Views 263
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

Link to comment
  • Solution

You can change it to this

@media screen and (min-width:992px) {
.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; 
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.