Custom CSS Appearing on back end but not front end

Site URL: https://www.agrifitsolutions.ca/

Hey guys,

I have some custom CSS to add a divider to the top of the block. As you can see in the first screenshot, the code appears on the backend.

Here is the code for reference:

[data-section-id="6099256065b40529aadc3eab"]
{
  .section-background {
  overflow: visible;
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(https://agrifit.squarespace.com/s/Orange-Triangle-Bottom.svg) bottom no-repeat;
    mask: url(https://agrifit.squarespace.com/s/Orange-Triangle-Bottom.svg) bottom no-repeat;
    transform: translateY(-100%);
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      -webkit-mask-size: 300% 50%;
              mask-size: 300% 50%;
    }}}
}

In the second screenshot, the CSS does not appear.

Any ideas?

On 8/4/2021 at 11:59 PM, gmck said:

Site URL: https://www.agrifitsolutions.ca/

Hey guys,

I have some custom CSS to add a divider to the top of the block. As you can see in the first screenshot, the code appears on the backend.

Here is the code for reference:

[data-section-id="6099256065b40529aadc3eab"]
{
  .section-background {
  overflow: visible;
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(https://agrifit.squarespace.com/s/Orange-Triangle-Bottom.svg) bottom no-repeat;
    mask: url(https://agrifit.squarespace.com/s/Orange-Triangle-Bottom.svg) bottom no-repeat;
    transform: translateY(-100%);
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      -webkit-mask-size: 300% 50%;
              mask-size: 300% 50%;
    }}}
}

In the second screenshot, the CSS does not appear.

Any ideas?

I saw it display well