CSS not displaying on website

Kristina_B · February 15, 2021

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!

creedon · February 16, 2021

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.

Let us know how it goes.

Edited February 17, 2021 by creedon

creedon · February 16, 2021

Something has gone wrong for sure.

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

Kristina_B · February 16, 2021

2 hours ago, creedon said:

Something has gone wrong for sure.

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 */
}

Kristina_B · February 17, 2021

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.

Let us know how it goes.

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

creedon · February 17, 2021

I was puzzled at first but your clue about the code you had added recently led me to the issue. 🙂

CSS not displaying on website

Question

Kristina_B

Link to comment

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

creedon

Kristina_B

creedon

Posted Images

5 answers to this question

Recommended Posts

creedon

Link to comment

creedon

Link to comment

Kristina_B

Link to comment

Kristina_B

Link to comment

creedon

Link to comment

Create an account or sign in to comment

creedon

Kristina_B

creedon

Support

Community

Developers

Resources