Did something change on squarespace? Half my codes broke

What happened? I haven't checked my site in months because everything was the way I wanted... I went back today for a basic update and noticed my menus were no longer vertically centered anywhere on my site.

Then I noticed all the fonts that we're previously black on my bio pages for me and my team, are white. 

I had an animation queued up for a hidden page on the site, and the animation was completely broken as well. 

I had custom indexing code (thanks tuan!) on that hidden page where you click a title and it would scroll down to that part. It took a lot of experimenting to figure out how to get it to scroll down to the exact spot I wanted. But now... its back to scrolling too low on every title. 

Did something change in the coding in the last few months? Why are my codes suddenly not working and/or wrong without any changes?

website : www.thetenmg.com

@LeauxFi, chances are, squarespace had an update and they changed stuff that messed up your existing code. Could be changing class names, ids, etc.

35 minutes ago, AlexSan said:

@LeauxFi, chances are, squarespace had an update and they changed stuff that messed up your existing code. Could be changing class names, ids, etc.

squarespace was my first foray into css and writing scripts outside of html way back in the myspace days lol. Ive fixed the text changing to white issue through editing styles. No idea how that changed or why. But i think you're right that IS the culprit. Something has happened on Squarespace's side that broke all my custom css. 

Hopefully its as simple as renaming everything but, did they list out somewhere what names things would have to change to? 

Example:

What do i need to change here to make this work?

//leauxfi banner
section[data-section-id="61fdb3fc29a34e3eea8fb405"] .row {
  display: flex;
  align-items: center;
  justify-content: center;
}
section[data-section-id="61fdb3fc29a34e3eea8fb405"] .row .col .sqs-block {
  padding: 10px !important;
}
#block-daf99410cfc6092cafe3 {
  margin-top: -2px;
}

Or my now broken anchor/jump to links

//event anchor links stuff
html {
  scroll-behavior: smooth;
  scroll-margin: 300px;
}
.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}
@media screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1669057617341_1590729 {
    display: none !important;
    visibility: hidden;
  }
  

 
  #block-yui_3_17_2_1_1669057617341_1590729 {
    visibility: hidden;
    display: none !impmortant;
  }
}
#block-yui_3_17_2_1_1646149692611_6756 {
    padding-top: 7px; 
}
@media screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1669226799897_33295 {
    display: none !important;
    visibility: hidden;
  }
}

Something just needs to be renamed?

1 hour ago, LeauxFi said:

What happened? I haven't checked my site in months because everything was the way I wanted... 

Did something change in the coding in the last few months? Why are my codes suddenly not working and/or wrong without any changes?

Hi @LeauxFi SquareSpace is continuous making improvements to their platform, this can include changing the reference names to blocks. 

If you use out-of-the-box SquareSpace functionality, this shouldn't affect things as much (if at all). But if you have Custom CSS or other custom code, you will need to maintain it to keep them working. SquareSpace do not offer support for custom code, so you need to manage them yourself if you choose to use them.

SquareSpace does not announce or keep a list of changes for the public. However if you google it, I think a few people might offer a comprehensive up-to-date list. To help you in the right direction, the name you want to search for is "SquareSpace CSS selectors". These are the reference names that you can select and apply styling to in your Custom CSS panel.

Here is a very useful introductory video by Inside The Square on CSS for beginners, you should check it out!

For your problems:

If you can go through and comment on the code (or list out), what it's meant to do vs what is broken and provide the where they are on your website, it will be easier for the community to help you. Screenshots are great. Or it's a lot to go through!

On 12/15/2023 at 1:00 PM, melody495 said:

Hi @LeauxFi SquareSpace is continuous making improvements to their platform, this can include [...]

Hey thanks for the suggestions. I've been looking through the selectors and I just don't get what I did wrong. I singled out one of the things that broke. At the top right and bottom left of my website are some social links. The last one is a tiktok link where I used CSS to change the icon to the standard tiktok icon. Whatever changed on squarespace's background broke that. All it's supposed to do is show the picture like it used to. Here's the code I have to do so 

BOTTOM TIKTOK ICON:

//tiktok footer icon
sqs-svg-icon--wrapper.url div {
    visibility: hidden;
}
.sqs-svg-icon--wrapper.url {
    background-image: url(https://static1.squarespace.com/static/61bd15d7e1c71204485ecbe0/t/62131fb6b7c2f243d399385c/1645420470663/tiktokroundblack.png);
    background-size: cover;
    background-repeat: no-repeat;
  transform:scale(1.6);
  position: relative;
    bottom: 0.5px;
}

TOP TIKTOK ICON:

//social links in header
.icon[aria-label="URL"] svg {
  visibility:hidden;
}
.icon[aria-label="URL"] {
background-image: url(https://static1.squarespace.com/static/61bd15d7e1c71204485ecbe0/t/621da8ab0b9b365aea19f2f4/1646110891131/tiktoklogo2.png);
    background-size: 16px;
    background-repeat: no-repeat;
    transform:scale(1.04);
  position: relative;
    top: 0px;
}

update.... i just deleted ALL of my CSS and it made absolutely no difference to the site. O_o

maybe its not that the codes are broken, but somehow the CSS isn't functioning AT ALL for my site? I even added a basic align code from a recent thread to test it, and nothing happened.

/* Keep the menu items at the same height as the site title */
.header-menu-nav-wrapper {
  position: fixed;
  top: 41%; /* Adjust this value to center the menu vertically */
  transform: translateY(-50%);
}

update #2 : got something to work. Tried a piece of a code i found recently in another thread meant for changing the font in the menu/header. Altered it to manually change the height of my menu to try and balance it out...and it worked? how did something THIS simple do the job? it doesn't even seem finished. is it really just the naming conventions that broke everything?

.header * {
    margin-top: -2px !important
}

On 12/19/2023 at 11:25 PM, LeauxFi said:

 i just deleted ALL of my CSS and it made absolutely no difference to the site. O_o

At the bottom of your CSS panel, is there an error message in red? CSS won't work if there is an error.

This line here doesn't look right. It's missing a semi-colon. 

It's best to always use a semi-colon, even if it is not needed for the last CSS style. To avoid this like this from happening.

Edit: this looks suspicious also. Think you are referring to the class, if so, you are missing a dot for the class name. (see the line below which is selecting the class name with a dot)

On 12/21/2023 at 6:10 PM, melody495 said:

At the bottom of your CSS panel, is there an error message in red? CSS won't work if there is an error.

This line here doesn't look right. It's missing a semi-colon. 

 

 

There WAS an error a few days ago, it said i was missing an opening { somewhere. I found it and fixed it so now theres no errors its just... nothing that used to work, still works. I just don't understand how everything could just break like that. I should start giving examples... on our gallery, it used to change to gray on mouseover using this code:

//color to gray on mouseover, grid,masonry,reel, or strips
.gallery-masonry-item img {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}
.gallery-masonry-item:hover img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

What changed on squarespace's side... that invalidated this? If i could understand that, I could probably fix the rest of the code too. And thank you for your help thus far. I'm pulling my hair out trying to understand this

9 hours ago, LeauxFi said:

There WAS an error a few days ago, it said i was missing an opening { somewhere. I found it and fixed it so now theres no errors its just... nothing that used to work, still works. 

There are still errors in your CSS. Have you looked at my screenshots above and rectify those as a start? Your CSS won't work as expected if there are errors.

You need to fix all the errors before investigating individual issues.

If you are still struggling, I suggest hiring a developer to help you. Unfortunately code needs maintaining, not just SquareSpace but all software code regardless on what platform, so if you can't maintain yourself then this won't be the last time you run into issues.

Quote

Something just needs to be renamed?

Sometimes it is renaming, sometimes the structure of the HTML has changed and the selectors need to be updated to reflect the new structure.

As @melody495 points out SS is changing things all the time so you should work in regular checking out your site to make sure things still look how you want them to.

On 12/24/2023 at 4:27 PM, creedon said:

Sometimes it is renaming, [...]

Thank you. I ran my code through a few checkers and it came back with no errors. And I discovered something today.... it seems that all of the codes work... for mobile. O_o

So when I'm editing my site, and I switch to the mobile view? All of the codes are working as they used to. It's only on desktop application where suddenly they stopped working. I've been changing them around a little in mobile view and they're still responsive as well. So, is it possible a code is wrong if it still works as expected on mobile but not desktop? And I'm not talking about the codes where we specify mobile only with the max-width tag. I'll post an example. 

On this code, I simply wanted any text in a specific section that was underlined... to be turned red, alter the font size, and remove the underline. I used this code:

//WORKS ON MOBILE? change underline color
section[data-section-id="637c4a75c10b4a517ecbd275"] span[style*='underline'] {
      color: red;
  text-decoration: none !important;
  font-size: 23px;
}
span[style*='underline'] {
      color: red;
  text-decoration: none !important;
}

On mobile it works fine and you get:

But on desktop view you get:

I'm growing more and more confused by the minute lol. Hope you all are having a great holiday season. I'm going to go through and check line by line for any missing ; as it was suggested earlier. I don't have any error notifications from squarespace nor the other checkers though. I appreciate any help!

What is the URL for the page you show in the previous post? That way we can get a look at it on our own devices and might see what the issue is.

6 minutes ago, creedon said:

What is the URL for the page you show in the previous post? That way we can get a look at it on our own devices and might see what the issue is.

https://www.thetenmg.com/event

55 minutes ago, creedon said:

 

  section[data-section-id="637c4a75c10b4a517ecbd275"] span[style*='underline'] {
    color: red;
    text-decoration: none !important;
    font-size: 23px
  }

hmmmm. i found that you're absolutely right, i was missing a "}" on line 53. So it was pulling it from another place which I guess meant everything in between was wrapped in the mobile-only ruleset. I fixed it.... but it changed nothing 😢 so i ask this... do any errors occuring BELOW the code we've been talking about (lines 76-84) effect it? As in, could a broken media/mobile code below here be the culprit?

EDIT: Found the culprit. The animation/javascript for that page was causing all the issues. It broke everything. I deleted it in its entirety and everything went back to working. I'm thinking the missing "}" was getting pulled from the broken animation script putting everything in between into mobile-only mode. once i fixed that...i can see a lot more things are broken but they're obvious. it'll be tedious, but its a RELIEF. I now know at least all the code didn't suddenly break, but instead the animation which I imported from outside broke. Go figure. This was the code responsible

/*Loading Animation from Will-Myers.com*/
#wm-loading-animation{
  position:fixed; 
  z-index:9999;
  height:100vh;
  width:100vw;
  background:#ff0000;
  display:flex;
  justify-content:center;
  align-items:center;
}
.loading-graphic{
  animation: pulse 0.6s ease-in-out 0.3s;
}
#wm-loading-animation.hide-animation{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s,
      opacity .5s linear; /*Hide this element after load*/
}
@keyframes pulse {
  0%   {transform: scale(1);}
  50%   {transform: scale(1.3);}
  100%   {transform: scale(1);}
}
/*End Loading Animation from Will-Myers.com*/
//FIX ME @media screen and (max-width:767px) {
  #REMOVEMEwm-loading-animation{
  position:fixed; 
  z-index:9999;
  height:100vh;
  width:100vw;
  background:#ff0000;
  display:flex;
  justify-content:center;
  align-items:center;
}
.loading-graphic{
  animation: pulse 0.5s ease-in-out .2s;
}
#wm-loading-animation.hide-animation{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s,
      opacity 1s linear; /*Hide this element after load*/
}
@keyframes pulse {
  0%   {transform: scale(1);}
  50%   {transform: scale(1.3);}
  100%   {transform: scale(1);}
}
/*End Loading Animation from Will-Myers.com*/