Custom Code is not applied on the live site

Hey folks,
I need your kind help in one of the serious matter that I am currently facing.
If you see this website:
https://www.briancash.work/
Password: TestWebsite22

Its almost messed up on the live website because the Custom Css that I am using is not being applied on the live website.
It was working fine few days ago but then stopped working.
But when I open the website editor and then open the custom css panel, it suddenly applies css to the website.

Is anyone else facing the same issue? I am also attaching the screenshots of live website vs the editor.

Thank you in advance!

I suspect you have syntax errors in your Custom CSS.

You are getting different renderings because things work differently in the site editor than they do when the site is viewed from the outside world.

Fix the syntax errors and things should get better and be more consistent.

4 minutes ago, creedon said:

I suspect you have syntax errors in your Custom CSS.

You are getting different renderings because things work differently in the site editor than they do when the site is viewed from the outside world.

Fix the syntax errors and things should get better and be more consistent.

Thank you Sir for your reply!
I appreciate your detailed response.

But can you please guide me what kind of syntax errors the above code contains that you shared?
If you can share with me just one example to give me an idea, i would be grateful.

Thanks so much!

On 9/6/2023 at 3:05 AM, NajiyyaYounas said:

Thank you Sir for your reply!
I appreciate your detailed response.

But can you please guide me what kind of syntax errors the above code contains that you shared?
If you can share with me just one example to give me an idea, i would be grateful.

Thanks so much!

I see line 450 - 461 is fine, maybe problem from another line. Can you post all code?

Choose this then paste code, we can see it easier

I have an issue where the CSS code works on the Squarespace site editor but not on the live site and I can't figure out why. It pertains to 2 specific pages:

• The front page where there are 5 image/list items that supposed to gradually transition and rotate 180 degrees and upward when hovering over them.
• On the leadership page, the image/list items is supposed to gradually transition to move up upon hover but with no 180 degree rotation.

Both of these elements work when in edit mode, but on the live site, this doesn't work. On the front page, the items instantaneously rotates 180 degrees and upward (no gradual transition). On the leadership page, the items instantaneously moves upward instead of a gradual transition.

Also, the buttons in the list items, they are black colored buttons that are supposed to transition to turn red on hover. This works on the Squarespace site editor but not on the live site. Instead, the buttons turn light blue. 

Front page:

• SS Editor: https://ranunculus-fish-fhr3.squarespace.com/config/
• Live site: kobold (koboldinc.com)

Leadership page:

• SS Editor: https://ranunculus-fish-fhr3.squarespace.com/about-us/leadership
• Live site: Leadership — kobold (koboldinc.com)

Haven't been able to solve these issues, so any help is much appreciated!

Use this extra code to Custom CSS box

li.list-item, li.list-item:hover {
    transition: all 0.5s ease !important;
}

@tuanphan Thank you so much, that resolved the revolving image/list item issue! 

For the buttons in the list items on the home page, would you have a solution to keep buttons transitioning to turn red on hover instead of turning light blue? The buttons in the list items under the Leadership page turn red on hover, so that's okay.

I pinpointed where the buttons are using the browser Inspect, but not quite sure what code to use or how or where to implement it 🤷‍♂️.

a..list-item-content_button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary

I know there's more to it, but would it be something similar to this:

.sqs-block-button-element  {
 primary.sqs-block-button-element:hover {
    color: #C80000;
}
      }

On 10/10/2024 at 3:10 AM, Squaredspace said:

@tuanphan Thank you so much, that resolved the revolving image/list item issue! 

For the buttons in the list items on the home page, would you have a solution to keep buttons transitioning to turn red on hover instead of turning light blue? The buttons in the list items under the Leadership page turn red on hover, so that's okay.

I pinpointed where the buttons are using the browser Inspect, but not quite sure what code to use or how or where to implement it 🤷‍♂️.

a..list-item-content_button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary

I know there's more to it, but would it be something similar to this:

.sqs-block-button-element  {
 primary.sqs-block-button-element:hover {
    color: #C80000;
}
      }

You can use this to Custom CSS box

body.homepage a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary:hover {
    background-color: #f00 !important;
}

Oh, it was a matter of adding "body.homepage" 🤦‍♂️. Thank you very much @tuanphan, you are a awesome!!