Custom CSS not appearing on live site

Site URL: https://rectangle-flamingo-fbgg.squarespace.com/

None of my custom CSS is showing up on the live site but I see it in the preview when editing.

Specifically not seeing border-image CSS code on live site 😞 

Hello there,

Without knowing the code you're using to create the border styles shown in the screenshot, it is a bit tricky to identify where the issue is. However, it could be that you are not targeting the correct elements or your CSS isn't specific enough.

For example:

#block-yui_3_17_2_1_1620362436514_9368 {
outline: 5px solid;
border: 5px solid;
outline-offset: 5px;
}

Creates an offset outline and border effect similar to the image you've attached without the flourish.  If you could please share the CSS you're using to create the effect we could determine the changes you may need to make.

Hope this helps!

-Dan

Oh sure - I've tried a few different versions, including targetting the specific block id as you've indicated.

This is one that does appear when editing:

.content {
  border: 90px solid transparent;
    -moz-border-image: url('/s/Frame_1.svg') 120 round round;
    -webkit-border-image: url('/s/Frame_1.svg') 120 round round;
    -o-border-image: url('/s/Frame_1.svg') 120 round round;
    border-collapse: unset;
  padding: 3%;
}

I created a custom code block as well that works - though I would really like to target a content block instead:

.home-shirt {
  border: 130px solid transparent;
    -moz-border-image: url('/s/Frame_1.svg') 120 round round;
    -webkit-border-image: url('/s/Frame_1.svg') 100 round round;
    -o-border-image: url('/s/Frame_1.svg') 120 round round;
  padding: 0%;
}

It just seems to me that border-image is just not supported? Maybe I'm wrong.

On 5/8/2021 at 6:48 AM, familystyleLA said:

Oh sure - I've tried a few different versions, including targetting the specific block id as you've indicated.

This is one that does appear when editing:

.content {
  border: 90px solid transparent;
    -moz-border-image: url('/s/Frame_1.svg') 120 round round;
    -webkit-border-image: url('/s/Frame_1.svg') 120 round round;
    -o-border-image: url('/s/Frame_1.svg') 120 round round;
    border-collapse: unset;
  padding: 3%;
}

 

I created a custom code block as well that works - though I would really like to target a content block instead:

.home-shirt {
  border: 130px solid transparent;
    -moz-border-image: url('/s/Frame_1.svg') 120 round round;
    -webkit-border-image: url('/s/Frame_1.svg') 100 round round;
    -o-border-image: url('/s/Frame_1.svg') 120 round round;
  padding: 0%;
}

 

It just seems to me that border-image is just not supported? Maybe I'm wrong.

/s/Frame_1.svg url won't work on preview/live mode.

use full image url, eg: https://google.com/s/Frame_1.svg

Ahhhh thank you 😁

On 5/11/2021 at 12:42 AM, familystyleLA said:

Ahhhh thank you 😁

Do you need help on these?

Site URL: https://rectangle-flamingo-fbgg.squarespace.com/

1. (Tablet-Homepage) Increase box width, reduce box padding?

2. (Tablet-Header) Move cart icon down a bit?