Jump to content

How to remove the hover function in a gallery caption on mobile?

Recommended Posts

Site URL: https://www.bretmeraki.com

I have made it so that my gallery caption is triggered by hovering over the photo on desktop. However, this doesn't apply to mobile, and the same custom CSS that allows it to function on a desktop creates a really unsightly effect. Does anyone have a block of code or some kind of command that would allow me to solely have the function on a desktop but remove it from mobile devices?

Custom CSS: 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.6); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
.gallery-caption-content {
font-size: 1.3rem !important; /* caption font size */
color: white; /*caption font color */
.gallery-grid-item {
position: relative;
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
.gallery-caption-grid-simple {
transition-delay: 0ms;
.gallery-caption a {
  color: black; /* color of the caption text */
footer p1{
  font-size: 10px;
  color: white !important;

Link to comment
  • 7 months later...
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

23 hours ago, CooperWhite said:

Did you ever figure this out? I have the same question.

If you share link to page where you have problem, we can help easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.