kacideiser Posted November 19, 2023 Share Posted November 19, 2023 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} Link to comment
Solution melody495 Posted November 19, 2023 Solution Share Posted November 19, 2023 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. tuanphan 1 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Website Developer e: melody@melodylee.tech 💻 Can't figure something out and want to learn? 💁♀️ 1-2-1 Squarespace session 👩💻 Need some customisation for a design? 💁♀️ Custom Code help ☕ Did I help? 💁♀️ I like coffee Link to comment
kacideiser Posted November 20, 2023 Author Share Posted November 20, 2023 Thank you Melody495, that worked perfect! Link to comment
melody495 Posted November 20, 2023 Share Posted November 20, 2023 @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 💻 Can't figure something out and want to learn? 💁♀️ 1-2-1 Squarespace session 👩💻 Need some customisation for a design? 💁♀️ Custom Code help ☕ Did I help? 💁♀️ I like coffee Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment