Jump to content

BretMeraki

Member
  • Posts

    1
  • Joined

  • Last visited

BretMeraki's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. 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; }
×
×
  • 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.