Jump to content

CSS not displaying on website

Recommended Posts

Site URL: https://www.chilliosis.com/

I have a bunch of custom CSS made on my site, such as lines between sections, floating animations, fonts etc. I only noticed yesterday that it's out of a sudden not displaying on any browser. It doesn't show it inside the editor either until I literally go inside the CSS and then it suddenly displays all the CSS changes. It's like it knows. What could be a possible cause and solution for this? Thank you!

Screen Shot 2021-02-15 at 3.14.28 PM.png

Screen Shot 2021-02-15 at 3.14.12 PM.png

Link to comment
  • Replies 5
  • Created
  • Last Reply
2 hours ago, creedon said:

Something has gone wrong for sure.

1350307970_ScreenShot2021-02-15at5_48_51PM.png.7e11b58ac032c1dc70e160e307c5c1a0.png

Could you post your entire Custom CSS here? Are you getting any syntax error messages in the Custom CSS panel?

 

It's not signaling any syntax errors. I know everything's a bit messy, but it was working up until yesterday or a few days ago. The most recent changes were made in the "lines between borders" area where I added more of these:

[data-section-id="600c9e0b77e3432ce50a933b"] {
  border-right: 1px solid #CFE295;
}

 

.nav-gif-wrapper img {
    opacity: 0;
}
.nav-gif-wrapper:hover img {
    opacity: 1;
}
.nav-gif-wrapper img {
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
  	 display: block;

}
.nav-gif-wrapper img {
    position: absolute;
}


@font-face {    
font-family: 'MonumentExtended-Regular';       
src: url('https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/5fab6ae06753be6bf53f85bf/1605069536676/MonumentExtended-Regular.otfFONT URL');  }


@font-face {    
font-family: 'PS-Ayelin-Regular';       
src: url('https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/6007a69f36b84575d7445f46/1611114144040/PS-Aelyn-Regular.otf');  }


@font-face {    
font-family: 'AkzidenzGrotesk-LightExtended.otf';       
src: url('https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/6007ae55dca4d06650810cb3/1611116117174/AkzidenzGrotesk-LightExtended.otf');  }


@font-face {    
font-family: 'AkzidenzGrotesk-BoldExtended.otf';       
src: url('https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/600e7346a83d995f2c8b7b73/1611559750637/AkzidenzGrotesk-BoldExtended.otf');  }



// button font

.sqs-block-button-element {
  font-family: 'AkzidenzGrotesk-LightExtended.otf' !important;
  border: 1px solid !important;
}
	

.header-menu-nav-item a {
     font-family: 'AkzidenzGrotesk-LightExtended.otf'!important;
                    
 }

.header-menu-nav-item a:hover {
     font-family: 'AkzidenzGrotesk-BoldExtended.otf'!important;
                    
 }





// h4

h4 {
	font-family: 'AkzidenzGrotesk-LightExtended.otf';
  text-transform: uppercase;
  font-size: 14px;	
  letter-spacing: 0.3em;
  
}

h1,h2,h3 {
  font-family: 'PS-Ayelin-Regular';
  
}





// border header


header#header {
	border-bottom: 1px solid #CFE295;
}





// hover
#block-yui_3_17_2_1_1611116900843_4275 {  
    animation-name: floating;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, 0px); }    
}



#block-yui_3_17_2_1_1611436818307_13340 {  
    animation-name: floating;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, 0px); }    
}

#block-yui_3_17_2_1_1611440058970_365 {  
    animation-name: floating;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, 0px); }    
}


#block-yui_3_17_2_1_1611436964132_10133 {  
    animation-name: floating;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, 0px); }    
}

// mood over matter animation
#block-yui_3_17_2_1_1611803956462_13233 {
	animation-name: trip;
  	animation: trip 30s linear infinite;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes: trip {

	from { transform: rotate(0deg);
  }
  
   	100%  { transform: translate(360deg); }
  
	to {transform: rotate(0deg);}
}




 

// burger menu on everything

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align right */  
  .header .header-burger {
    display: flex;
    order: 2 !important;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: left !important;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}


// da button arrow

.sqs-block-button-element:after {
   content: ' ⟶';
   padding-right: 10px;
}


// think tank exercise
div.exercise {
  width: 75%;
  border: 5px solid #2C3783;
  padding: 50px;
  margin: 0px;
  box-shadow: 10px 10px #2C3783;
}


// lines between section

.page-section{border-top:1px solid #CFE295; 
}

[data-section-id="6009d845d6e15823a06587af"] {
  border-top: 0px solid #CFE295;
}
  
  
[data-section-id="5fab331d36495c1e6202c2f1"] {
  border-top: 0px solid #CFE295;

}


[data-section-id="6029ac34157b8c4fb54af78b"]{
  border-left: 1px solid #CFE295;
  
}

[data-section-id="6029af017808c5425d209197"]{
  border-left: 1px solid #CFE295;
  
}



[data-section-id="6029afe8db12250c43810ff4"]{
  border-left: 1px solid #CFE295;
  
}


[data-section-id="6029fac19c6fb3465e25a424"
]{
  border-left: 1px solid #CFE295;
  
}


[data-section-id="6029ffd93864731411d30106"
]{
  border-left: 1px solid #CFE295;
  
}

[data-section-id="602a019c378d1c24622b4052"
]{
  border-left: 1px solid #CFE295;
}


[data-section-id="602a0232ef4fdf139f89f223"
]{
  border-left: 1px solid #CFE295;
}

[data-section-id="600c9e0b77e3432ce50a933b"] {
  border-right: 1px solid #CFE295;
}


[data-section-id="5fadfa6c162257496b3efce2"] {
  border-left: 1px solid #CFE295;
  
  
}




#split-group-2 .wm-split-1{
   border-right: 1px solid #CFE295;
}



// image hover dandy lion

#img-hover1 { 

   background-image: url('https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/60091e1295fc6e53360f427f/1611210259457/dandylion-tea-branding-04.png');

    height: 40vw;

    width: 32vw;

    background-size:contain; }


#img-hover1:hover {

    background-image: url('https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/60091e0bd1b9a01bb3d880fa/1611210252470/dandylion-tea-branding-color-04.png');

 }

@media screen and (max-width: 600px) {
  #img-hover1 {
    width: 65vw;
    height: 80vw;
    display: block;
  	margin-left: auto;
  	margin-right: auto;
    
}
}



// image hover hands of life

#img-hover2 { 

   background-image: url('https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/60122370198bc11a7c52f04a/1611801458270/hands-of-life-doula-cover-bw-09.png');

    height:40vw;

    width: 29.5vw;

    background-size:contain; }

#img-hover2:hover {

    background-image: url('https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/601223735b89172ba82cb85b/1611801461564/hands-of-life-doula-cover-color-09.png');

 }

@media screen and (max-width: 600px) {
  #img-hover2 {
    width:59vw;
    height: 80vw;
    display: block;
  	margin-left: auto;
  	margin-right: auto;
    
}
}



// image hover animus

#img-hover3 { 

   background-image: url('https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/6009215db1398f3041cda5c2/1611211102497/animus-psychology-branding-bw-04.png');

    height: 40vw;

    width: 32vw;

    background-size:contain; }

#img-hover3:hover {

    background-image: url('https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/6009215703bf651671dd74c9/1611211096664/animus-psychology-branding-color.png');

 }

@media screen and (max-width: 600px) {
  #img-hover3 {
    width: 65vw;
    height: 80vw;
    display: block;
  	margin-left: auto;
  	margin-right: auto;
    
}
}



// selected text
::selection {color:#F0F0F0; background: #EE8F69;}


// form

.form-wrapper .field-list .field .field-element {
  background-color: #F0F0F0;
  border: none;
  border-radius: 0;
}

body, html {
  cursor: url(https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/600e6abbbe3bd878c193db9e/1611557563440/chilliosis-cursor-06.png), default;
  
}

a { cursor: url(https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/600e6ac159f43d099e4d1130/1611557569040/chilliosis-cursor-08.png), pointer; }



input {
cursor: url(https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/600e6b196d32a72dc7fbd998/1611557657990/chilliosis-cursor-07.png), auto !important;   
}

textarea {
cursor: url(https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/600e6b196d32a72dc7fbd998/1611557657990/chilliosis-cursor-07.png), auto !important; 
}

.sqs-system-button {
    cursor: url(https://static1.squarespace.com/static/5fab32ed7a1f7f5b539e7ca0/t/600e6ac159f43d099e4d1130/1611557569040/chilliosis-cursor-08.png),auto !important;
}


// blog button



.blog-more-link {
border: 1px solid #CDE093;
padding: 20px 20px 20px 20px;
border-radius: 0px; /* round shape */
background: #111212; /*background color */
  
  
color: #CDE093 !important; /*font color*/
  font-family: 'AkzidenzGrotesk-LightExtended.otf'!important;
  text-decoration: none!important; 

}


.blog-more-link:hover{
background: #CDE093; 
  color: #111212!important;
  

  
  /*background colour on hover */
}

 

Link to comment

I think the problem is that you have several \n] (newline or return and right bracket) character sequences in your CSS. Obviously they aren't being flagged by the Custom CSS field but do cause the LESS processor to choke.

Replace the bad sequence with the character ]. After I did that here the LESS processor seemed OK. I put the fixed CSS in place here locally and things were looking good.

1781316721_ScreenShot2021-02-16at11_52_36AM.png.2630f389f6c43ec765c6efc20428a633.png

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
4 hours ago, creedon said:

I think the problem is that you have several \n] (newline or return and left bracket] character sequences in your CSS. Obviously they aren't being flagged by the Custom CSS field but do cause the LESS processor to choke.

Replace the bad sequence with the character ]. After I did that here the LESS processor seemed OK. I put the fixed CSS in place here locally and things were looking good.

1781316721_ScreenShot2021-02-16at11_52_36AM.png.2630f389f6c43ec765c6efc20428a633.png

Let us know how it goes.

That fixed it! I had no idea that was a factor. Thank you so so much!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.