Jump to content

Custom CSS not appearing on live site

Recommended Posts

  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment

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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

rectangle-flamingo-fbgg.squarespace.com-

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

rectangle-flamingo-fbgg.squarespace.com-

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.