hpeck

Site URL: http://hannahpeckillustration.co.uk I'd like to change this hover / overlay Lightbox font: to match the font I have before clicking (Adobe Calson Pro): I've checked my global style texts and they're all serif, so unsure where this is coming from. Any CSS I can stick on the end? thanks

Works great! Just need the font to match, now. It's Adobe Calson Pro

Site URL: http://hannahpeckillustration.co.uk I've used CSS to add overlay & hover text over images which I like and want to keep; but I want to reformat the text inside the pop-up Lightbox to match. At the moment the banner is grey and text / font doesn't match. Any CSS I can add / edit? pw: webdesign2022 Hover style: Lightbox pop up I want fixed:

thank you! super helpful

Domain is changed now to hannahpeckillustration.co.uk

Sure; https://pelican-fuchsia-f6eb.squarespace.com WEBDESIGN2022

Have cobbled together some CSS which is working fine; just can't get the hover text visible despite changing the hex code. You can really faintly see the overlay text, how do I get it to grey / black? .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; position: absolute; pointer-events: none !important; } .image-caption-wrapper { max-height: 100% !important; } .image-caption-wrapper { background: rgba(255,255,255,0.7) !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 100%; -webkit-transform: translate(-0%,-0%); -ms-transform: translate(-0%,-0%); transform: translate(-50%,-50%); } .image-caption p { color: #ea4e4c !important; font-size: 20px !important; font-weight: semibold !important; text-transform: lowercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 0 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: ; opacity: .1; }

Site URL: https://pelican-fuchsia-f6eb.squarespace.com/config/design/custom-css The margins on my other pages are set to 48 width, but only option for galleries (in this case masonry) are full bleed, full, and inset, all of which are too big. I researched adding gallery blocks / spacers to either side of the gallery but I can't edit directly into this section, only options are the little design / content tab. Have marked up on attached what I want to achieve. thanks!