Custom CSS not working

Hi! I've been updating my website with custom CSS code and it has mostly stopped working. I can see the changes on the previewer when logged in, but on the live site none of the CSS code appears to be taking effect. Does anyone have any ideas?

I'd like this code to work, we have a different banner image for desktop and mobile. Currently both are being displayed on desktop and mobile.

@media only screen and (min-width: 769px) {
  section[data-section-id="61fd083ef847ff495f4d4472"] {
    display: none;
  }
}

@media only screen and (max-width: 769px) {
  section[data-section-id="614c5ea43849b54d902ff140"] {
    display: none;
  }
}

Thanks so much!

This type of error with CSS not rendering on the live site is most often seen when there's a minor error somewhere in your Custom CSS, would you be able to post it all here so it can be given a quick check?

Thanks for taking a look over this Ziggy! It's quite a lot of CSS. I haven't seen any errors in the syntax checker:

//Fonts
@font-face {
font-family: GothamLight;
src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/61fd0212d2ad6f612178ec36/1643971090755/GothamLight.ttf);
}

@font-face {
font-family: GothamMedium;
src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/61fd01e39ce0ed35c38fe42c/1643971043714/GothamMedium.ttf);
}

@font-face {
font-family: GothamBold;
src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/61fd01fb7bac0e69d2db9e16/1643971067928/Gotham-Bold.otf);
}

@font-face {
font-family: GothamBlack;
src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/61fd02043fff576e24494360/1643971076852/Gotham-Black.otf);
}

@font-face {
font-family: CreamyCoconut;
src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/61fd0f9833d00e727ef15a5e/1643974552360/Creamy+Coconut.ttf);
}

@font-face {
  font-family: BigCaslon;
  src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/620e195d80a01b53b36fd5ef/1645091165825/big-caslon.ttf);
}


//Setting Fonts
h1, h2, h4, .newsletter-form-header-title {
font-family: 'GothamBlack' !important;
}

h3, .sqs-block-button-element--medium, .sqs-block-button-element--large, .newsletter-form-button, .sqs-block-image a {
  font-family: 'CreamyCoconut' !important;
  font-weight: 400;
}

.sqsrte-large, .sqsrte-small, .header-nav-item a {
  font-family: 'GothamMedium' !important;
}

@media only screen and (max-width: 768px) {
.accordion-item__title-wrapper {
  font-family: 'arial' !important;
}
}

p {
  font-family: 'GothamLight' !important;
  font-weight: 600 !important;
}

// Spotlight Navigation Style //
.header-nav-list:hover > .header-nav-item {
  opacity: 0.5;
}

.header-nav-list:hover > .header-nav-item:hover {
  opacity: 1.0;
}

// Spotlight Navigation Folder Style //

.header-nav-folder-content:hover > .header-nav-folder-item {
  opacity: 0.5;
}

.header-nav-folder-content:hover > .header-nav-folder-item:hover {
  opacity: 1.0;
}

//Footer Logo
#block-yui_3_17_2_1_1635934882779_5005 {
  max-width: 100px;
}

//Home Page Banner Image
@media only screen and (min-width: 769px) {
  section[data-section-id="61fd083ef847ff495f4d4472"] {
    display: none;
  }
}

@media only screen and (max-width: 769px) {
  section[data-section-id="614c5ea43849b54d902ff140"] {
    display: none;
  }
  
  section[data-section-id="61fd083ef847ff495f4d4472"] {
    top: 50px !important;
}
}

//Mobile Banner Logo Size
@media only screen and (max-width: 769px) {
#block-yui_3_17_2_1_1645132835816_66206, #block-yui_3_17_2_1_1645004143967_2298, #block-yui_3_17_2_1_1645018043774_4298, #block-4c8bc84ec0048133ff12,#block-78bd3db738c4f2e7b7a5, #block-yui_3_17_2_1_1645028235880_4364, #block-yui_3_17_2_1_1645189969577_1877, #block-yui_3_17_2_1_1645652057141_3103 {
  max-width: 200px !important;
  max-height: 200px !important;
  padding: 0px !important;
}
}

//Mobile Testimonial Images
@media only screen and (max-width: 769px) {
#block-yui_3_17_2_1_1644959167296_20433, #block-813662e6300ce640cf4c, #block-e383630715c6b64b9f01, #block-yui_3_17_2_1_1644965192007_7088, #block-4b36c5388ddcc6004d4d, #block-yui_3_17_2_1_1645008520145_78910, #block-0c8cec64ab1578a82f70  {
  max-width: 150px;
  margin: auto;
  padding: 0px !important;
}
}

//Mobile Home Page Clock Image
@media only screen and (max-width: 769px) {
#block-7967a9d943c5364e048f {
  max-width: 150px;
  margin: auto;
  padding-top: 0px !important;
  padding-bottom: 50px !important;
}
}

//Mobile About Page Bus Shelter Image 
@media only screen and (max-width: 769px) {
  #block-yui_3_17_2_1_1644962237429_29284 {
    max-width: 250px;
    margin: auto;
    padding-top: 0px !important;
    padding-bottom: 50px !important
  }
}

//Mobile Contact Page Logo
@media only screen and (max-width: 769px) {
#block-yui_3_17_2_1_1646057497430_4046 {
  max-width: 150px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
}


//Home Page Split Section
section[data-section-id="63b426c7ccee314b7198a6d2"] 
#block-e11e03034cb2ec306855, section[data-section-id="63b426d04a1a734ddcf5740a"]  #block-e03b201e3fc97fa58cda { 
  max-width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


//Hide background play button
section[data-section-id="63b426c7ccee314b7198a6d2"] { .background-pause-button .paused .visible, .background-pause-button.visible {
  visibility: hidden!important;
}
}

.background-pause-button {
  display:none !important;
}

//Home Page Blog Summary
#block-yui_3_17_2_1_1632395027009_9656 { 
  img:hover {
    opacity: 0.5;
  }
  
  a:hover {
    font-weight: 500;
  }
}

//Blog Page 
section[data-section-id="614c5bd8980f2d75cf15c633"] {
  img:hover {
    opacity: 0.5;
  }
  
  a:hover {
    font-weight: 500;
  }
}

//Hide Events From Store
.grid-item.tag-hide-product {
    display: none;
}

//Background Art Pause Button
.background-pause-button.visible {display: none!important}

//Event Page Links
.eventitem-backlink, .event-meta-addtocalendar-container {color:red}

//Our Offer Events Block
#block-yui_3_17_2_1_1633362377206_7362 { img {
  border: 2px hsl(200, 30%, 21%) solid;
}
  img:hover {
    opacity: 0.5;
  }
  
  a:hover {
    font-weight: 500;
  }
}

//Events Page Image & Link Hover
section[data-section-id="614c5befdf75166bc8be5eed"] { img {
  border: 2px hsl(200, 30%, 21%) solid;
}
  img:hover {
    opacity: 0.5;
  }
  
  a:hover {
    font-weight: bold;
  }
}

//Events font readjust mobile
@media screen and (max-width: 767px) and (orientation: portrait) {
[data-collection-type^="events"] .item-pagination-title {
    font-size: calc((1.6 - 1) * calc(.012 * min(100vh, 900px)) + 0.5rem);
}
}

//Our Work Page Card List Buttons
.list-item-content__button {
  font-size: 1.6rem !important;
}

//Image Card Button
.sqs-block-image a {
  font-size: 1.6rem !important;
}
// Expanding Button On Hover //
.sqs-block-button .sqs-block-button-element--medium, button.sqs-editable-button.join-button, .list-item-content__button {
    transition: transform 0.3s !important;
}
  
.sqs-block-button .sqs-block-button-element--medium:hover, button.sqs-editable-button.join-button:hover, .list-item-content__button:hover {
    opacity: 1 !important;
    transform: scale(1.07) !important;
}
 
.newsletter-block .newsletter-form-button:hover {
   opacity: 1 !important;
    transform: scale(1.07) !important;
}

p a:hover {
  color: #F75854 !important; 
}

//Meet The Team 
figcaption.gallery-caption.gallery-caption-grid-simple {
h4 {
  font-size: 100%;
  font-weight: bold;
  letter-spacing: 0.1px !important;
  margin: 0px !important;
  text-align: center;
  }
  
  p {
  letter-spacing: 0.2px !important;
  margin: 5px !important;
  text-align: center;
  }
  
  h4 :hover {
    opacity: 0.8;
  }
}

//Make Meet The Team Images Circular
section[data-section-id="62175b182199c62329e4a6d0"] img, section[data-section-id="6217a616ba652805bbc20e19"] img, section[data-section-id="62289532e66e0a30d23440fa"] img {
  
  border-radius: 50% !important;
}

section[data-section-id="62175b182199c62329e4a6d0"] img:hover, section[data-section-id="6217a616ba652805bbc20e19"] img:hover, section[data-section-id="62289532e66e0a30d23440fa"] img:hover {
  
opacity: 0.6 !important;  
}

//Anchor Links
:target:before {
content:"";
display:block;
height:120px; /* fixed header height*/
margin:-120px 0 0; /* negative fixed header height */
}

Can you try removing the last section for Anchor links:

//Anchor Links
:target:before {
content:"";
display:block;
height:120px; /* fixed header height*/
margin:-120px 0 0; /* negative fixed header height */
}

I'm not sure this is right:

:target:before

Hi Ziggy,

I removed then added back the CSS line by line, this was the culprit: 

//Events font readjust mobile
@media screen and (max-width: 767px) and (orientation: portrait) {
[data-collection-type^="events"] .item-pagination-title {
    font-size: calc((1.6 - 1) * calc(.012 * min(100vh, 900px)) + 0.5rem);
}
}

All working now, thanks for your help!

Billy