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
  • Views 382
  • Created
  • Last Reply

Top Posters In This Topic

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.