Jonathangreenphotos

This is the code in use on the Simple Grid: @media screen and (max-width:767px) { div.gallery-grid-wrapper { grid-template-columns: repeat(1,1fr) !important; }} .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0); // overlay color height: 100%; padding: 0; opacity: 0; pointer-events: none; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; // center caption box vertically justify-content: center; // center caption box horizontally } .gallery-grid .gallery-caption-content { font-size: 1.5rem !important; // caption font size color: white; //caption font color padding: 1vw; // padding around the caption text-align: center; // center text within caption box } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; max-width: unset; } figcaption.gallery-caption.gallery-caption-grid-simple * { font-family: 'Bebas Neue' !important; } /* Reset padding/margin for the gallery grid */ div.gallery-grid-wrapper { padding: 0 !important; margin: 0 !important; display: grid !important; grid-gap: 8px !important; /* 8pt gap between images */ grid-template-columns: repeat(4, 1fr) !important; /* 4 images per row */ width: 100vw !important; max-width: 100vw !important; } /* Force images to maintain a 4x5 aspect ratio */ div.gallery-grid-item-wrapper { position: relative; padding-bottom: 125%; /* Aspect ratio of 4:5 */ overflow: hidden; } /* Ensure images fill the container while keeping aspect ratio */ div.gallery-grid-item-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Mobile responsiveness */ @media screen and (max-width: 767px) { div.gallery-grid-wrapper { grid-template-columns: 1fr !important; /* Single column on small screens */ } }

Hi all, I'm trying to ensure my masonry grid has clickable links that appear whilst hovering over images like on my homepage which uses a simple grid: https://www.jonathangreenphotos.com/ I would also like for there to be no padding on the border of the page like in the page above. This is the page I'm implementing the masonry grid on: https://www.jonathangreenphotos.com/documentary I have tried several things so far to no avail, maybe because the simple grid CSS is interfering. If anyone knows any fixes or can help me with custom code for this, it would be much appreciated!

I'm looking for some help to change the font of my customised photo grid captions. I currently have the following code for my homepage photo grid gallery which uses an overlayed caption that fades in and out on mouse hover. Please feel free to visit my site to see it in action. I'm looking to set a different font for the captions on this grid. My sit paragraph 2 front is currently set to "Bebas Neue" which is also my paragraph 1 and site title. However, I want my paragraph 2 font to be a simple Adobe font such as Adobe Calson Pro or a similar easy-to-read font. But I wish for my paragraph 2 text on my caption overlay on the homepage to remain as Bebas Neue to stay consistent with my brand. I'm unsure how to make this work as I'm still quite new to learning CSS code. Any help would be appreciated, this is my current code for this section: @media screen and (max-width:767px) { div.gallery-grid-wrapper { grid-template-columns: repeat(1,1fr) !important; }} .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0); // overlay color height: 100%; padding: 0; opacity: 0; pointer-events: none; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; // center caption box vertically justify-content: center; // center caption box horizontally } .gallery-grid .gallery-caption-content { font-size: 1rem !important; // caption font size color: white; //caption font color padding: 1vw; // padding around the caption text-align: center; // center text within caption box } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; max-width: unset; }