Custom CSS not working

jjqwd · January 3, 2023

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!

Ziggy · January 3, 2023

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?

Edited January 3, 2023 by Ziggy

jjqwd · January 4, 2023

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

Ziggy · January 4, 2023

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

Ziggy · January 4, 2023

Interesting, can you try just adding the CSS that isn't working without anything else as a test?

Maybe tweaking to this also:

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

jjqwd · January 5, 2023

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

Custom CSS not working

Recommended Posts

jjqwd

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Ziggy

Link to comment

jjqwd

Link to comment

Ziggy

Link to comment

Ziggy

Link to comment

jjqwd

Link to comment

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources