Jump to content

Custom CSS not working

Go to solution Solved by Ziggy,

Recommended Posts

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!

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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 by Ziggy

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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

 

Link to comment

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

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • Solution

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;
  }
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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

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.