KMills

I am having a similar problem if anyone is able to help.

Darn. Sorry for talking to myself here...ha. Still having an issue with the logo going off center when I adjust the page size. Maybe I need to set the logo to shrink with the page? It doesn't appear on mobile so it would likely just be an issue for partial screen and ipad. Also noticing that I can see part of the logo when my screen isn't at full height. If you look closely at "Homepage" in the second photo, you can see part of the Sharp Leadenhall logo.

I *think* i fixed it by adding this: .header-title { position: absolute; left: 50%; top: 50%; transform: translate(-48%, 10%); z-index: 9999; text-align: center; } I was having an issue with the logo not be centered even though it was set at 50%. It needed to be just slightly off -- 48%.

@tuanphan - I am having a similar issue if you have time to help. I have a large site title/logo on all of my pages other than the homepage. Hamburger nav on desktop. When i open my nav, the logo behind it was getting in the way. I added in some CSS to adjust the Z index but that kept making my X disappear. I adjusted and got the X back but I still can't click my top link and really don't want it to go any lower (would love to raise it even more really). Lastly, my site title/logo isn't staying centered when I adjust my page size. They wanted a logo at the very top of the page and I couldn't get it high enough by just using the top of the top section. https://emu-blackbird-p2a2.squarespace.com/history password: 1234 The issue is on every page except the homepage because there is no site title/logo in the nav there. Current css for the nav: .header--menu-open .header-menu { z-index: 1; } .header-title { z-index: 0; position: relative; } .header--menu-open .header-title { pointer-events: none; } .header--menu-open .header-menu { pointer-events: auto; } .header-nav, .header-actions { display: none;} #collection-672c0c0fbfedb5226efa84cb .header-title { display: none; } @media (max-width: 768px) { .header-title { display: none; } } .header--menu-open .header-menu { padding-top:20px !important; } .header--menu-open .header-menu a { margin: 0px; padding: 10px 20px; line-height: 1.5; } .header-burger { display: flex;} #collection-672e01135944530ab8fcc64a, #collection-672d0b21de7b685ab788663c, #collection-672e056bffd4ac32c352929d, .header-burger { position: relative; top: -60px; } .top-bun, .patty, .bottom-bun { height: 2.5px !important; } .header--menu-open .header-menu { visibility: visible; opacity: 1;} .header-menu-nav-item a { font-family:'rift'; padding: 14px 16px; font-size: 48px; color: white; text-align: center; margin-left: 4vw; } .header-menu-nav-item a:hover { color: #C1976C !important; } //underlines for nav// .header-menu-nav-item a::after { content: ''; display: block; width: 30%; height: 3px; background-color: #C1976C; transition: width 0.3s ease, opacity 0.3s ease; position: absolute; left: 35%; bottom: 0; opacity: 1; } .header-menu-nav-item a:hover::after { width: 0; opacity: 0; } @media (max-width: 768px) { .header-menu-nav-item a:hover::after { width: 30% !important; opacity: 1 !important; }} .header-nav-item--active a, .header-menu-nav-item--active .header-menu-nav-item-content { background-image: none;}

I am also looking for this. I tried SquareKicker's plugin but it doesn't quite seem to work with a gallery. I can put images on sections and horizontally scroll through that but it's hard to get things lined up as I want that way.

Ok actually, I am realizing the flaw with my code is that the fade in starts as the page loads so if I put 3 seconds, that has faded in long before you get to an image at the bottom of the page. Can anyone help me with this please? How do i switch it to not start fading in until you get to that section/ scroll down?

For anyone else looking to do similar, I used this: #block-yui_3_17_2_1_1732376100964_42031 { animation: fade-me-in 3.5s ease-in-out forwards; } @keyframes fade-me-in { 0% { opacity: 0; } 50% { opacity: 0.4; } 80% { opacity: 0.7; } 100% { opacity: 1; } }

@tuanphan - Thank you! For some reason it won't allow me to mark it as a solution but that was perfect.

I forgot that the image fade-in option was for classic editor. I have a handful of images that I want to fade in. This site is a for a historical society and is very text heavy so I don't want the whole site to fade in. I am trying to get the images to fade in using: @keyframes fadeMe { from { opacity: 0; } to { opacity: 1;}} .fe-block.fe-block-yui_3_17_2_1_1732376100964_42031 { opacity: 0; animation: fadeMe 1s 1.5s forwards; } I am trying to fade in the newspaper clipping images. If someone could please help me with adjusting my code for the first one, I can get the block IDs/fe-blocks for the others. Screen shot to show the one I am attempting right now. It's the first photo collage (all just one actual image) on the History page. https://emu-blackbird-p2a2.squarespace.com/history code: 1234 The block ID is #block-yui_3_17_2_1_1732376100964_42031.

@tuanphan - That's awesome! Thank you! seadragon-marlin-z77k.squarespace.com/about code 1234 The three "learn more" links on the About page.

@tuanphan - I appreciate the attempt but this unfortunately did not fix it. I had tried something similar when I first set up the pinned image. I just tried your code as well hoping that mine was just a little off. I don't think I will have a ton of iPad views for this site but it's still driving me crazy that I can't figure it out.

@tuanphan - Yes! I assume I need an SVG and some javascript? I wouldn't necessarily need it to actually wiggle like theirs (would be cool though!) but just appear as a squigly underline that appears on hover would work too.

@tuanphan - Thanks for responding! I have two sticky images on the site. One is on the homepage where your image shows https://seadragon-marlin-z77k.squarespace.com/ and one is on https://seadragon-marlin-z77k.squarespace.com/about where my image shows. I am having the same problem with both on ipad view. Password: 1234

I am also having an issue with portrait mode iPad view if you have time to share your thoughts, @tuanphan. On my About and Homepage I have pinned images. When scrolling on ipad it oddly displays the color block under it. I'd like for portrait mode in ipad to just display those pages as it would for mobile (unless there is some other pinned image fix? I haven't been able to find one). Ideally in landscape view, it would stay as is because that is working well on ipad. https://seadragon-marlin-z77k.squarespace.com/ Code:1234 In the attached screenshot (iPad) you can see the orange spacing under where I am scrolling. I am not getting this on desktop and on mobile, it switches to a different view where I stack the text under and over the photo block.

I am interested in trying this too! Did you figure it out @litlstudio? I have seen it here: https://www.mica.edu/ when you go under the "Explore MICA" tab.

Any updates with this? I'd love to have my site look like mobile for portrait mode only on ipad. The varied sizes of tablets/ipads makes me unsure of where the cut off point should be.

I have pinned images with text that scrolls up on several places on my site (twice on homepage and once on About. I have it set not it display on mobile ( in some instances creating separate mobile sections). I am happy with it on my laptop and phone but on ipad it shows the color block under the image as it scrolls. Hard to capture in a photo as it's moving but I attached a screen shot from my ipad. I did some Googling and it seems like this is a regular issue with pinned images but I also couldn't quite find the solution. Code: 1234 I'd appreciate it if anyone has time to take a peek! Thanks!

@Ziggy - Thank you!

Hello! I am working to create a special effect for my secondary buttons. I want a secondary color to swipe across the buttons on hover. The swipe is working but at the end, I'd like the button to be fully covered in the new color. There is an angle on the left side, so part of the orange still shows after hover/swipe. This specific slant/angle is part of the logo which is why I don't want the hover in a standard rectangular shape. https://seadragon-marlin-z77k.squarespace.com/past-events Code: 1234 I have tried tinkering with the widths but it just seems to be a cycle of adjusting one makes blue show before I hover or covers less of the block at the end. I need a way to adjust the length of the swipe color so that it will fully encompass at the end OR change the left side to be 90 degrees and the right side of the swipe to remain at a slant. In the screen shot below, I am hovering over "2023". Essentially, the blue shape that is covering my orange rectangle button is a parallelogram /__/ and I want it to be a trapezoid |__/ (or the shape could just become longer so it will encompass the button regardless of the left side angle). To be clear, I want the color to come across with an angle. I want the button to start as my orange color and end as fully encompassed in the blue color. Am I dreaming a little too big here? 😅 Maybe! But I feel so close and I think it will look really cool. This site is for a Design Festival, so I want to add in some extra tricks. Current css: .sqs-button-element--secondary { font-family: "neue-haas-grotesk-display"; font-size: 13px; font-weight: 900 !important; font-style: normal; color: white; background-color: #FE5000; position: relative; overflow: hidden; border: 2px solid #FE5000; z-index: 1; padding: 12px 20px;} .sqs-button-element--secondary::before { content: ''; position: absolute; top: 0; left: -125%; width: 100%; height: 100%; background-color: #10069f; transition: left 0.5s ease; transform: skewX(-20deg); transform-origin: bottom right; z-index: -1;} .sqs-button-element--secondary:hover { color: white; border-color: #10069f;} .sqs-button-element--secondary:hover::before { left: 0; width: 100%;}

I was just having this issue. I edited on my display and that fixed the issue without making adjustments to my regular sized screen view. Similar to how you edit on mobile and it adjusts. I was surprised by this.

I added this code block over my background image and it worked for me. I needed to give a photographer credit. My alt text reader is reading it correctly. I thought I'd need to add css for it as well but it's working on its own on all of my browsers. Going to do some more testing but I am happy with this for now. Even when I put in a description it was saying there wasn't one but it's allowing me to add the title. <div class="sr-only"> <svg width="1" height="1" aria-labelledby="svgTitle svgDesc" role="img"> <title id="svgTitle">People at ribbon cutting ceremony, photo © Edward Weiss</title> <rect width="1" height="1" fill="none" /> </svg> </div> If you'd like to see how it's showing up: Site: https://gardenia-pumpkin-ekbe.squarespace.com/ Code: 1234

Thanks. I did that but am still having the issue. Started working in Safari instead and now it's not happening. Not sure what the issue could be. I prefer to work in Chrome, so hopefully I can get the issue resolved.

Just started working on a new page today and Squarespace seems to be glitching in edit mode. I've only added some text and some basic css so far. It keeps telling me to refresh the page. It happened at least a dozen times this evening. Anyone else having issues? I checked Squarespace's tech issue page and it's all in the green and says no issues. Not much to see yet but: https://emu-blackbird-p2a2.squarespace.com/ Code: 1234

I am struggling with this now and can't quite get it right. https://gardenia-pumpkin-ekbe.squarespace.com/our-team Code: 1234 Font styles type test is at the bottom of that ^ page. @font-face { font-family: 'BuenosAiresWeb-Regular'; font-weight: 400; src: url('https://static1.squarespace.com/static/663e57781d512d4c90c02e87/t/66ad204de2acea41ebff843a/1722622029954/BuenosAiresWeb-Regular.woff2') format('woff2'), url('https://static1.squarespace.com/static/663e57781d512d4c90c02e87/t/66aa8eac3e7d1a206e468c59/1722453676310/BuenosAiresWeb-Regular.woff') format('woff');} @font-face { font-family: 'BuenosAiresWeb-Regular-Italic'; [Do I put Italic or just the regular font name here?] font-style: italic; src: url('https://static1.squarespace.com/static/663e57781d512d4c90c02e87/t/66ad204de2acea41ebff843a/1722622029954/BuenosAiresWeb-Regular-Italic.woff2') format('woff2'), url('https://static1.squarespace.com/static/663e57781d512d4c90c02e87/t/66aa8eac3e7d1a206e468c59/1722453676310/BuenosAiresWeb-Regular-Italic.woff') format('woff'); } p { font-family: 'BuenosAiresWeb-Regular'; font-weight: 400; font-style: normal; font-size: 15.5pt; line-height: 27.2px;} p em, p i { font-style: italic; font-family: 'BuenosAiresWeb-Regular-Italic'; [Do I put Italic or just the regular font name here?] }

I added expanding text to my up next button on a program page. It's doing what I want in general, except it moves in a very clunky way. Anyone have a fix for this? It's not the worst but I'd love to make that a little smoother. It's my first time doing anything with "cubic-bezier" so it's likely I just need some tinkering there. https://gardenia-pumpkin-ekbe.squarespace.com/homebuying-incentive code: 1234 Bottom of page. Hover over "Community Spruce Up Program". #block-yui_3_17_2_1_1729120972631_79651 a { font-family: 'LyonDisplay-Bold-Web'; font-size: 20pt; font-weight: 700; line-height: 35px; text-decoration: none !important; color: inherit !important; transition: font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1), line-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);} #block-yui_3_17_2_1_1729120972631_79651 a:hover { font-size: 24pt; line-height: 36px;}