joshuahext

13 hours ago, HoaLT said:

Have you figured it out yet?

I check that your logo is fine now

Oh, I had missed a { in my code so it had all broken, stopping the change logo on scroll. So, now that's fixed... I get:

...before scrolling. 

On 7/15/2024 at 12:56 PM, HoaLT said:

.header .header-display-mobile .burger--active .burger-inner>div {
  background: var(--menuOverlayNavigationLinkColor) !important;
}

1. White before the header shrinks on scroll + before the menu is opened => I check it works correctly

2. Grey after the header shrinks on scroll + before the menu is opened => it still works fine

3. Grey before and after the header shrinks on scroll + after the menu is opened.

On scroll and menu is open is fine => it still works fine

On top (no scroll) and menu is open => the menu needs to be grey

Use the following CSS to fix it

.header .header-display-mobile .burger--active .burger-inner>div {
  background: var(--menuOverlayNavigationLinkColor) !important;
}

Let me know how it works on your site

Hey, I've just noticed that the logo also remains white when the menu is open. I have also tried some code to fix that but can't figure it out. Do you have any thoughts on that too?

10 minutes ago, HoaLT said:

.header .header-display-mobile .burger--active .burger-inner>div {
  background: var(--menuOverlayNavigationLinkColor) !important;
}

1. White before the header shrinks on scroll + before the menu is opened => I check it works correctly

2. Grey after the header shrinks on scroll + before the menu is opened => it still works fine

3. Grey before and after the header shrinks on scroll + after the menu is opened.

On scroll and menu is open is fine => it still works fine

On top (no scroll) and menu is open => the menu needs to be grey

Use the following CSS to fix it

.header .header-display-mobile .burger--active .burger-inner>div {
  background: var(--menuOverlayNavigationLinkColor) !important;
}

Let me know how it works on your site

Perfect, thanks!

Hey all,

So, a client requires that the hamburger on their homepage is:

1. White before the header shrinks on scroll + before the menu is opened

2. Grey after the header shrinks on scroll + before the menu is opened

3. Grey before and after the header shrinks on scroll + after the menu is opened.

I used the code below to achieve this:

#collection-66729b4c507c183e7979f764 {
  
#header:not(.header--menu-open) .burger-inner > div {
  background-color: white;
  transition: all 0.5s ease-in-out;
}

 #header .header--menu-open .burger-inner > div {
  background-color: #3e4245 !important;
  transition: all 0.5s ease-in-out;
}  

#header.shrink .burger-inner > div {
  background-color: #3e4245;
  transition: all 0.5s ease-in-out;
  }  

}

However, for some reason it's not working and I cannot figure out why. Any help would be greatly appreciated! 

Site is here: https://www.jandjeducation.com/

58 minutes ago, Sam0smith said:

Please add this : 

 

.header-dropshadow {
    box-shadow: none !important;
    opacity: 0 !important;
}

let me know how it goes. 

 

Oh my god I'm an idiot. Thank you so much. I didn't think that it could be that the image below was being made darker. That's perfect. Thanks!!!

Site URL: https://parrot-bird-pz4d.squarespace.com/
PW: Fiona

Hi all, 

I went to bed last night and everything was fine, but upon waking the gradient header now lightens everything underneath it. I do not want this at all and have no idea how to fix it. I thought perhaps the client making some changes while I slept caused it but removing all of my code does not fix the issue and I have searched through all of Squarespace's Header customization options that I can find and there doesn't seem to be anything causing it there either. 

Please help!

You can see the effect I am referring to here:

I've also noticed that it's made the black gradient that I've coded for the shrink header a weird lighter grey instead of the pure black I have coded.

EDIT: I've spoken to the client and they made no changes to the Header overnight.  So far I have tried:

.header .header-announcement-bar-wrapper {
  -webkit-backdrop-filter: unset !important;
  backdrop-filter: unset !important;
  background: none !important;
  mix-blend-mode: normal !important;
}

to try to remove this effect to no avail.

@tuanphan, I'm having the same issue.

I can get this code snippet to work for every other kind of block but not shape blocks.

It would be wonderful if we could get your brain on this!

Same issue, a client really wants to be able to use arrows to navigate a slideshow.

3 minutes ago, melody495 said:

You are very welcome! 🙂 Glad it's all working for you.

The workaround is a bit annoying, but at least it works! Also if you will hand over editing to your client, worth checking what screen size they'll be editing on if it'll make a difference. 

Definitely the same issue with tablet size FE but your issue with a big screen is even less common! If you can report the issue to SquareSpace, maybe this will be another vote for them to fixing the FE grid spacing issues on less common screen sizes. 

Hahaha, they just said "ask people on the forums, we won't do anything for you. And we can't be held responsible for the efficacy of their solutions" so I don't think they're going to do anything. Definitely raised the issue though.

1 hour ago, melody495 said:

Do let me know how it goes!

That was the solution! I'll just go into a bit more detail to help anyone with the same issue:

So, at my 100% zoom level I can't shrink the text block. Then, even with centre alignment, zooming out, shrinking the text box and then saving works a treat. Now everything works perfectly on all monitor sizes. 

The only thing to flag is, if and when anyone else has this issue, whenever you change anything at all, the block will revert to having the massive spacing. So every time, before saving, zoom out to 200%, shrink the block last and then save. Learn to know where the other blocks will sit when you shrink the block because it has to be the very last thing you change. 

Thanks again! 

19 hours ago, melody495 said:

From what I can see, with your current settings, the behaviour you are seeing is by design, this is just how the FE works. As your text block is vertically aligned centred, it will add padding top and bottom when the page stretches to fill in the extra space on bigger screen sizes. 

Can you share a screenshot of the effect of changing the vertical alignment? Big text block -> change vertical alignment to top, save, click on preview (arrow at top right), change browser to greater than 100% or until you see the big gap issue. Share it and we can see what it does?

I'm limited by what I can see and suggest by just inspecting your website. If you want me to take it thorough look for you, drop me an email. 

Hey there! Okay, so I tried the zooming out crazy amounts and shrinking the block and it seems to have worked on my monitor. That's crazy. I just kept going "SURELY NOT" out loud the whole time. I need to wait until my client wakes up to check with them as to whether it's fixed on their monitor but that's crazy. I would never have thought of something as simple as zooming out wildly to fix it.

I don't get why FE wouldn't just make it flush with the block below at all sizes as standard though given that if you put two blocks together you obviously want them to stay together at all monitor sizes and as it always has on the 20 or so prior sites I've built but I guess things are always shifting and changing at the moment. That's kind of bonkers.

I'll reach back out here to say whether it worked for the client or not but if that's the solution I will obviously mark your last message as such and I will be in your digital debt forever ahaha. Thanks for working with me on this so far.

12 hours ago, melody495 said:

Sounds like probably a SquareSpace issue then. Have you contacted their customer care support? 

Might be able to use code to reduce the gap otherwise. 

I've tried reducing it with code but unfortunately it you reduce it on the monitor it shows up on it overlaps on the others. 

I will reach out to Squarespace just wanted to make sure I wasn't missing anything.

Any further thoughts from anyone would be greatly appreciated though as speed is of the essence here. 

On 12/8/2023 at 3:08 PM, melody495 said:

Hi, @joshuahext ok, it's because your main text block is set to vertically aligned center, change it to top, and this is what I see in my screenshot below.

In my screenshot, with the gap between text block and bottom line is because you will need to adjust the height of the text block once you align vertically top, then move the bottom line block up.

Hi @melody495

I'm afraid that isn't the solution. I can't shrink the text block any further than it's current size whatever alignment I set it to. So there's something causing this massive spacing that's unrelated to my code (as the issue persists even if I remove it all) and the alignment. 

On 2/7/2023 at 7:22 PM, watts-creative said:

@paul2009, regarding linking to sections: do you know of a way in Fluid Engine (preferably with CSS but js is ok) to offset an anchor link within a section and force it to stick to the beginning of its section, regardless of the browser window's size? I have tried many techniques to offset the position of the anchor link, but its position changes relative  to the size of the browser window.

To explain what I'm trying to create:

1. I have a page with multiple sections, and each section has its own full screen background image.
2. In each section I have a button to link to the section below it.
3. I've set anchor divs in each section, but I want the link to scroll to the beginning of the section itself—the beginning of the background image— and not the location of the anchor.
4. As mentioned, I've tried to finesse the offset with CSS for various screen sizes, but it doesn't look right. Seems crazy that there isn't this capability.

Any ideas? Is it possible? I can give the site and password if you wish to take a look.

In any case, THANKS!

This is exactly what I am wondering. 

Hey, so Will Myers has a great tutorial for doing anchor links with offsets without the need for scroll-margins (which don't see to work on Squarespace since the latest update)

https://www.will-myers.com/articles/anchor-link-offset-trick-in-squarespace

Hope that helps! 

Hey all! 

Not going to take this down but found you can adjust the menu columns by using the below CSS:

.menu-block .menu-style-classic .menu-items {
    column-width: 25em !important;
    column-gap: 4em !important;
}

By adjusting this I've gotten to something the client is happy with. Do let me know if there's another way though! 

Hi all,

So, I am creating a menu for a client, using the menu block, but they want the menu to only have two collumns even at wider screen sizes. Is there a way to limit the amount of columns that the multi-column layout creates? 

The link is below:

https://www.cinicocoffee.com/menu

Thanks!

17 hours ago, DPruitt said:

Here are a few soft solutions, but not sure if they are ideal for what you're trying to accomplish:

Option 1:

.sqs-block-accordion .accordion-item__dropdown--open {
    transition-property: visibility, opacity !important;
    transition-timing-function: linear !important;
    transition-duration: .5s, 2s !important;
    transition-delay: 2s, .5s !important;
}

Option 2:

.accordion-item__dropdown--open {
    transition: all ease-in-out 3s !important;
}

You might have to adjust the height of the accordion and a few other things to get the effect just right...

Hey, thanks for getting back to me! Unfortunately neither of those work. They both fade in the drop down after it's quickly swiped in. I'm looking to slow down that standard swipe animation itself. 

Can you possibly help with that?

Hey all,

So, I'm just upgrading my personal site to 7.1 now. Right now I just have a basic teaser landing page with an accordion block to open up my bio. My issue is that the Accordion block's animations are so quick and I'd really like to be able to smoothly slow them down to 1s long. But I can't find a way to do it smoothly whatever I try.

If anyone could help that would be amazing!

URL is https://www.joshuahext.com/, there's no password needed.

Bump

3 hours ago, jackwatkins said:

Anyone else unable to upload .woff or .woff2 with the recent update? This has only started happening for me since "Pages" was renamed to "Website" and Custom CSS has moved to "Website Tools". I'm unable to select the files when pressing "Upload files", and dragging and dropping the files onto the "Upload Files" brings up an error message saying they aren't a compatible file format? Any ideas?

Yeah, the issue only started for me after the UI update too. ...and I agree with everyone saying Squarespace's response to this has been very disheartening. The only thing I can suggest is my solution above in the meantime, which is: to go to the site on your phone, force desktop mode, and then upload the font from your phone. It works for me and I am on a Samsung Android device. I have no idea whether it will work on other phones though. 

3 hours ago, abicon said:

Yes me also, I include custom fonts in 90% of sites.

I have about 35 or so with custom fonts.

So have had to spend this evening in Australia, making sure all my custom code has 

!important;

Tags.

Because of the font code upgrades

Thanks Squarespace!!

 

It's terrible, I've got clients breathing down my neck on these projects too and I'm having to tell them I literally cannot progress as I cannot upload any fonts. I haven't noticed it affecting any fonts already in place though.

Anyone figured a way of hosting these fonts elsewhere or something until this sh*tstorm blows over?

EDIT:

Found a workaround that works for me in particular, if you go to the site on your phone, force desktop mode, and then upload the font from your phone, it should upload. This seems to be a working solution until they fix this. Hope that helps you guys too!

3 minutes ago, abicon said:

@joshuahext

Same issue josh, except i am on mac.

It's definite bug or they are no longer allowing custom font upload in 7.1 which is what the chat bot said when i asked (that's more scary).

Am awaiting a response from SQSP.

God, that would be a real dealbreaker for me. The guy at customer help didn't say they were planning on dropping the functionality to me and did say that it was an issue their devs were aware of. So, I hope that's not the case. Will send a follow up email to him though highlighting you are having the same issue on mac. 

For the past week or so, all of my clients have been complaining about Squarespace being on the fritz, and I have definitely experienced it too. Needing to refresh constantly to see changes, pages not wanting to save to allow me to refresh, the custom css box throwing up errors where there are none until you refresh and then they're magically gone. etc.

But waking up this morning to the new UI was a nice surprise, "Oh!" thought I, "This is why everything has been going wrong, they were preparing this. Everything will run smoothly now." Getting to grips with the new layout took all of 5 minutes and I like that they've put custom CSS and Code Injection together now etc. Looks great. Styles are a little hard to find and I imagine will be difficult for new users to stumble upon but apart from that, great.

My issue came with when I tried to upload a custom font to the custom folders section. I was uploading a .ttf which is listed as one of the accepted files and yet I got the attached error.

...So, I contact Squarespace Customer help to tell them that this functionality has broken since the update. They tell me they can't help with custom code. I say it's not about custom code, it's about the uploading feature. He sends me a video of it uploading fine on mac and tells me it's a "device or browser" issue. So I try every browser I have, and none of it works. So we realize that it's just that the development team have entirely forgotten to make it work for half or more of their user base: Windows users. Absolutely unbelievable. 

Shortly after, he sends an email telling me that it's an issue they are aware of already, so I assume they have had a lot of Windows users ranting and raving this morning. I guess my question is, are you a windows user, are you having this issue too, and do you have any workarounds while they get their sh*t together? 

I've tried doing it as a file upload through the link page method but can't work out how to point the custom css to that link after the fact etc. 

Any help would be appreciated as, hilariously, customer help aren't allowed to upload anything to your site for you, even if they can, because the platform is supposed to "empower users to make their own sites". ...and despite the fact that the platform was doing the exact opposite of that and that the customer help could help a customer, they wouldn't/couldn't. 

So, community? You've always been the best thing about this platform, help me (and countless others) out?

Thanks for your suggestion Tuanphan, big fan of everything you do for people on here!

I've tried with GIFs but they're either very lossy or become so large they really slow the page down.

I've actually figured out how to achieve this using vimeo iframes and it's given me a much better result without slowing the page right down now so I'll mark this comment as the solution.