skali

On the Work page we are are using a Portfolio with the Hover: Fixed layout. We are experiencing some issues on PC where the image isn't loading. We've tried to remove all code to narrow down why that why be occuring, but haven't be able to determine what's causing it. Has anyone else experienced this or is anyone able to help? Thanks! https://hanna-creative-co.squarespace.com/work HCC123

We are using a Hover:Fixed portfolio page layout and are finding that the images do not appear upon hover on Safari browsers. Things appear fine on Chrome. Anyone know how we might be able to fix this issue? I've tested removing all code from the site and the images still don't appear so it doesn't seem like a code interaction, but could be. https://hanna-creative-co.squarespace.com/work PW: HCC123

@tuanphan Appreciate it! You're the best.

@tuanphan Are you able to help me understand how I can apply something similar to this page? https://manchester-interiors.squarespace.com/press PW: MI123 When I implement this code the hover effect goes away. If possible, I'd like to keep the underline/hover effect and still make the image/text both clickable. Thank you in advance!

What is the best approach to create a navigation hover effect similar to this site? https://studiomagness.com/ When you hover over a link, I'd like the other links to fade into the background. Thanks in advance! Site: https://carly-ahlman-design.squarespace.com/ PW: CAD123!

On the homepage, we have a carousel list section. Is it possible to have BOTH the button and the image be clickable? I'm using this code, but it takes away the button. https://prima-italy.squarespace.com/ PW: PRIM@IT@LY123! /* List Carousel Clickable */ [data-section-id="6621b778c0a84d31f4506bbb"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }}

Hello! Does anyone know if there is a way to create a footer similar to this example? https://houseofhoney.com/ The site currently has code so that the footer is 'revealed' where the section above it slides up so the footer appears as if it's below/behind the other content. footer { position:sticky !important; bottom: 0; width: 100vw; } .system-page { background:white !important; z-index:99 !important; min-height:100vh; } #footer-sections { z-index:0 !important; } } I'm wonder if there is a way to alter the code or implement something new so that instead of the footer being revealed it slides up over the top. Thanks! https://carly-ahlman-design.squarespace.com/ CAD123!

@tuanphan Were you able to test and see if this is at all possible with our current layout? Thank you - I really appreciate your help!!

@tuanphan Genius - thank you for sharing! Although, with this site it's not exactly what we're looking for, but not sure if you're able to assist at all. 1. Pulling in the Work page isn't working and I'm assuming it's because of the customizations we've made to that page. I tested it with another portfolio page with a standard grid layout and works well, but we'd like it to be a carousel unit versus the grid underneath. 2. If I create a carousel unit instead pull that section in it doesn't remove the project of the page I'm on... I thought it might be a bit simpler but it seems like there may be too many customizations impacting the ability to do this?

On this site we have a few sticky heading text elements that tuck behind the other elements. Everything is working, but for some reason on the "About" page, the heading won't tuck behind everything on mobile only. In that section there is the heading (About Us), a line block, and a solid white shape block that the text should be tucking behind. When testing out the mobile view in Squarespace Editor, it works as intended (see static screenshot). But on the actual mobile site, it doesn't tuck behind (see video screengrab). https://lucas-studio.squarespace.com/about pw: LSI123 Can anyone help? Thanks! RPReplay_Final1709653195.MP4

Hello! I'm using a masonry style gallery sectionon this page (https://www.michaeldruker.com/properties). I've included the CSC code below that is implemented to style the captions & color change on hover. In addition to this we'd like to link out each image, but the links aren't activating. I'm thinking this code might be stacked on top of the click event or is disabling it for some reason. Or maybe it has to do with the initial opacity? Does anyone have thoughts on how I can bring the links forward so that they are clickable? The first image has a link applied for testing purposes (screenshot attached) Thank you in advance!! // *Caption Styling - Title* // @media @desktop { section[data-section-id="63eb213085c26b62e058f848"] .gallery-masonry-item .gallery-caption .gallery-caption-wrapper p.gallery-caption-content { margin: 0; color: white; font-family: 'Goudy+Modern+MT+Std+Regular'; font-style: normal; letter-spacing: 0em; line-height: 1.1em; font-size: 2rem; text-align: center; }} // *Caption Styling - Second Line (Location)* // @media @desktop { section[data-section-id="63eb213085c26b62e058f848"] .gallery-masonry-item .gallery-caption .gallery-caption-wrapper p.gallery-caption-content strong { color: white; font-size: 1rem; font-family: 'Karla'; letter-spacing: .05em; font-weight: 400; display: block; text-transform: uppercase; line-height: 20px; margin-top: 8px; line-height: 0em !important; margin-bottom: 30px !important; }} //* PROPERTIES GALLERY GREYSCALE EFFECT * // @media @desktop { section[data-section-id="63eb213085c26b62e058f848"] { .gallery-masonry-item img { filter: grayscale(100%); transition: filter .2s ease-in-out; } .gallery-masonry-item:hover img { filter: none; transition: filter .2s ease-in-out; }}} //* PROPERTIES GALLERY CAPTIONS (DESKTOP) * // .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.25); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-masonry-item { position: relative; } .gallery-masonry-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-masonry { transition-delay: 3ms; }

On this Portfolio page, the project titles that fall onto 2 lines seem to push the image up so it sits a bit smaller than the others that have 1 line titles. Anyone know how I might be able to fix this? https://lucas-studio.squarespace.com/projects PW: LSI123 Thanks!

@tuanphanYes, please! The site is now live: https://www.kennerknechtdesigngroup.com/

This site uses a custom hamburger menu, but on the home page it disappears into the background upon scroll because it's white and most of the backgrounds down the page are also white. Is there a way to have the word "Menu" change color to black up on scroll to that it appears continuously and doesn't get lost? https://kennerknecht-design.squarespace.com/ PW: KDG123 Thank you!

@tuanphan Incredible. Thank you so much!!