spacecowboy

That worked out great! Thank you so much!

Thanks @tuanphan, I think we are almost there! It is putting the 2 lines next to each other rather than stacking them. Any thoughts? I made a test page here: https://www.bdg-inc.com/testest password: secretsecret

@tuanphan Thanks again, since we have a dialogue going, I figured I'd ask one more question. Is it possible to break the "caption" up into 2 lines with different fonts or font weights? Where I could put the clients name one top in Bold and the job name below in a lighter style font. I've seen it talked about on here but I don't think I have come across a solution. If not, no big deal. The client likes it as is. I am just curious. Thanks!

Thank you @tuanphan that worked great! You are the MVP of this forum. Do you know if Squarespace changed something on their end? Is that the reason is stopped working properly?

Site URL: https://www.bdg-inc.com/office-buildings-working-environments Hi all, I recently noticed that the pages where I am using @tuanphan's "Gallery Grid Collection" custom CSS stopped displaying properly. I am assuming maybe Squarespace changed something on their end? If I recall correctly, the page should show thumbnails, and when you mouseover them you get a color overlay, and text. For me, the text is visible without the mouseover. Below is with the mouseover and without (those are 2 separate projects, that's why the thumbnail is different.)

@tuanphan Thank you very much! I don't have a tablet to review them on but the code is in there! I started another thread regarding adding videos to my project photo galleries if you'd have a look. I purchased a plugin I saw you suggest in another thread but, there is a certain clunkiness to how it works.

Site URL: https://daffodil-denim-9jre.squarespace.com/analog-devices-world-headquarters Pass= 20demo21 Seems like this is a popular request but I am trying to incorporate videos into my image gallery. Why Squarespace removed that in 7.1 is beyond me. I would love for them to pop-up in a lightbox alongside my images, but it doesn't seem possible. I purchased Video Lightbox Button from SQSP Themes and I got the video to work with a thumbnail in my gallery, however, if you click another image in the gallery and cycle through, you eventually stumble upon the "Project Video" image. I would love to be able disable that image from showing up in the lightbox as it would look like a mistake.

That would be great! I thought I got ahead of those homepage issues, but I hadn't tried it on a tablet. So many moving parts to follow!

I ended up changing it to 13px and adding line-height: 1.25;!important; I am truly grateful, thank you so much!

My apologies @tuanphan I didn't have notifications on and just saw this, I appreciate your reply. I was able to get it to work but just posted a follow up here

Site URL: https://daffodil-denim-9jre.squarespace.com/office-buildings-working-environments Hello, I am using custom CSS to display an orange overlay and some text (the caption) on hover. The problem is on mobile, the text runs outside the the thumbnail. The space between the lines seems excessive, and the font size could but smaller. Any suggestions? Thanks in advance. site: https://daffodil-denim-9jre.squarespace.com/office-buildings-working-environments pass is 20demo21 <style> /* Simple Grid Gallery w Text */ figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { color: white; font-size:1.2rem !important; font-weight:bold !important; text-align:center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #df6a2e; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.8; } /* remove gap */ figcaption { padding: 0 !important; } </style>

@tuanphan I am trying to achieve the same effect, using that code gave me the box I was looking for, but the titles are still showing up under the thumbnail. I am still using the trial Squarespace (using 7.1) so I don't believe I can share with you what I am looking at. Is there anything you can do without seeing the site?