Jump to content

Gallery image color overlay not fully covering photos on mobile view

Go to solution Solved by melody495,

Recommended Posts

I'm using code to make a caption and color overlay on my simple grid gallery images. It's working fine on desktop but on mobile the color overlay doesn't fully cover the image. 

https://leo-defensive-concepts.squarespace.com

pass: leo2023

.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
background: rgba(0,0,0,0.4);
  // overlay color 
  height: 100%;
  padding: 0;
  opacity: 1;
  pointer-events: none;
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center !important; // center vertically 
  justify-content: center !important; // center horizontally
}
.gallery-grid .gallery-caption-content {
  font-size: 1rem !important; // caption font size
  font-weight: 600 !important;
  color: white; //caption font color 
  padding: 1vw; // padding around the caption
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item img:hover
{transform:Scale(1.1);width:100%; height:100% 
overflow:hidden!important; transition-duration:1s} .gallery-grid-item {overflow:hidden!important}

 

Screen Shot 2023-11-19 at 10.39.25 AM.png

Link to comment
  • Solution

Hi, try adding this line?

max-width: unset;

Replace your first block of code with below

.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
background: rgba(0,0,0,0.4);
  // overlay color 
  height: 100%;
  padding: 0;
  opacity: 1;
  pointer-events: none;
  max-width: unset;
}

Let me know how it goes.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment

@kacideiser glad it's working for you 🙂

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

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.