CSS changes don't display until clicking on CSS Editor in menu

Hey, so I've got quite a bit of custom CSS code in my website (though it is all fairly simple), and all the code works exactly as I planned it to. However, I have this strange issue: when I first load the website, none of the CSS changes are visible, it's as if there is no custom CSS whatsoever. But as soon as I open the CSS editor, all of the correct changes pop up. I haven't made my site live yet, and I'm worried that if I do, none of those changes will display (my worries seem to be valid because when I open the mobile version on my phone, the CSS changes don't show up). In which case I would be wasting money on a website that doesn't work as desired. Anyone else having this issue? Anyone found a solution? I'm on a Pacific template, btw.

@gm284 Can you share the CSS you used? & site url? (setup password & share url)

2 hours ago, tuanphan said:

@gm284 Can you share the CSS you used? & site url? (setup password & share url)

Here's the site url: https://saffron-coral-f9p3.squarespace.com/

The password is my username, gm284.

Among other things, you will see that there is a lot of space under the scroll down arrows, which is fixed in my code. As mentioned before, these changes are shown to work in the editor, but not on the live site.

Here is a list of all the changes made in my code:

• reduced padding at the bottom of each page section (different values for desktop and for mobile)
• removed padding at the bottom of each instance of the down arrow
• used padding to space the text on "Testimonials" as desired (spacer blocks wouldn't let me get them right)
• changed all image sizes for mobile
• changed down arrow sizes for mobile

Here is all my CSS code:

///index padding////
@media screen and (min-width: 768px) { .collection-type-index .content-inner.has-content { margin-bottom: -110px !important; } }


@media screen and (max-width: 640px) { .collection-type-index .content-inner.has-content { margin-bottom: -40px !important; } }


///arrows///
#block-yui_3_17_2_1_1571184723988_37999  {padding-bottom: 0;
}
#block-yui_3_17_2_1_1571241501582_25682
{padding-bottom: 0;
}
#block-yui_3_17_2_1_1571241501582_83733
{padding-bottom: 0;
}
#block-yui_3_17_2_1_1571241501582_104114
{padding-bottom: 0;
}
#block-yui_3_17_2_1_1571241501582_122935
{padding-bottom: 0;
}

///testimonials text///
#block-yui_3_17_2_1_1571247031992_53176
{padding-left: 10%}
#block-yui_3_17_2_1_1571247031992_97845
{padding-right: 10%}
#block-yui_3_17_2_1_1571247031992_100389
{padding-right: 10%}

@media screen and (max-width: 640px);
#block-yui_3_17_2_1_1571247031992_97845
{padding-right: 5%;
padding-left: 10%}

@media screen and (max-width: 640px);
#block-yui_3_17_2_1_1571247031992_55702
{padding-right: 10%}

/* CSS FOR TABLET AND MOBILE */
@mobile:          ~"only screen and (max-width: 640px)";
@tablet:   ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
.sqs-block-image {
width: 60% !important;
margin: 0 auto;
}
 #block-yui_3_17_2_1_1571184723988_37999  {
width: 20% !important;
margin: 0 auto;
}
  #block-yui_3_17_2_1_1571241501582_25682 {
width: 20% !important;
margin: 0 auto;
}
  #block-yui_3_17_2_1_1571241501582_83733 {
width: 20% !important;
margin: 0 auto;
}
  #block-yui_3_17_2_1_1571241501582_104114 {
width: 20% !important;
margin: 0 auto;
}
  #block-yui_3_17_2_1_1571241501582_122935 {
width: 20% !important;
margin: 0 auto;
}
/* Insert Code for Mobile Above This Line */
}

@gm284

1. Replace //// content //// with /* content */

2. add ; to after

eg: padding-left: 10% is incorrect

It should be padding-left: 10%;

3. CSS for @media must have { and } 

eg: @media screen and (min-width:768px) {here CSS}

Some of your code is missing characters { or }

4. @media @tablet is incorrect

5. @media screen and (min-width:768px); is incorrect

No ; it should be @media screen and (min-width:768px) { css here }

In short, your code has many invalid characters

Also your code is not optimal. For example, in the first code, if  me, I will hide the padding bottom instead of using negative margin bottom

1 hour ago, tuanphan said:

@gm284

1. Replace //// content //// with /* content */

2. add ; to after

eg: padding-left: 10% is incorrect

It should be padding-left: 10%;

3. CSS for @media must have { and } 

eg: @media screen and (min-width:768px) {here CSS}

Some of your code is missing characters { or }

4. @media @tablet is incorrect

5. @media screen and (min-width:768px); is incorrect

No ; it should be @media screen and (min-width:768px) { css here }

In short, your code has many invalid characters

Also your code is not optimal. For example, in the first code, if  me, I will hide the padding bottom instead of using negative margin bottom

Thank you for your help. I made the changes you mentioned, but nothing is any different. Like I said before, all the code works. It displays correctly when the editor is open. But it still doesn't work on the live site.

@gm284 Where did you insert CSS?

@tuanphan In the Custom CSS editor

@gm284 Home > Design > Custom CSS? Saving css, i'll try checking.

@tuanphanHere is a screen recording to show you what I'm talking about. The changes don't load until I open the editor.

@gm284 you can use Loom.com to record video

@tuanphan did my video not work?

@gm284 My pc don't use video software

@tuanphan here you go https://www.loom.com/share/b53fb0f7699a4dbc9ea91f4b270570cb

@tuanphan It actually looks like I just fixed it! I just removed a small bit of code from the editor. To customize the "Testimonials" text, I used code blocks on the page rather than in the CSS editor, and now everything else seems to be working. Weird glitch.

Hello,

I am experiencing the same issue, granted I barely have any codes in mine. What did you do to resolve it? Or is it just a glitch that maybe if I have it live it should go away?

Thanks!

6 hours ago, dianap said:

Hello,

I am experiencing the same issue, granted I barely have any codes in mine. What did you do to resolve it? Or is it just a glitch that maybe if I have it live it should go away?

Thanks!

Can you share link to your site & Which problem?

On 7/1/2020 at 9:18 PM, tuanphan said:

Can you share link to your site & Which problem?

Here's the website & password.

silver-koi-9rcb.squarespace.com
PW: dianap

If you go to the "Intro section" where the picture of the dog it, you'll see a white box right in the middle. How do I make that a very thin white line versus that box?

@tuanphan

I'm having the same issue on my site as well. Custom CSS rules don't apply until I've opened Design > Custom CSS

CSS works properly as long as the Custom CSS section is open.

Only have 1 css rule applied - background image for the header

#header {
  background-image: url('/s/[file-name].jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}

I have a similar issue with the effects of one code displaying only when I go to Design --> Custom CC. It has to do with this code specifically, which creates a translucent-white background for text in a specified block:

#block-848b3e4b0bc6ae27ccc5 {   <---- my block ID

background-color: #f0f0f088;

padding: 1px;

text-align: center;

}

Any ideas what went wrong?

16 hours ago, Mania said:

I have a similar issue with the effects of one code displaying only when I go to Design --> Custom CC. It has to do with this code specifically, which creates a translucent-white background for text in a specified block:

#block-848b3e4b0bc6ae27ccc5 {   <---- my block ID

background-color: #f0f0f088;

padding: 1px;

text-align: center;

}

 

Any ideas what went wrong?

Can you share  site  url?

Same issue. I put one little bit of custom CSS in the custom CSS editor, but the change only shows up when I am in the Design/Custom CSS part of the Squarespace menu. All I'm trying to add is some shading behind the text on my homepage. It shows up when I'm in Design/Custom CSS but then goes away when I return to the main menu, even after saving. Can anyone help? 

Page url: https://www.themichellecowan.com/ 

CSS added: 

#block-d6b457e24091aa47165d{background:#61616161;padding:50px;text-align:center;}

On 1/29/2022 at 6:14 AM, ChelleChelle said:

Same issue. I put one little bit of custom CSS in the custom CSS editor, but the change only shows up when I am in the Design/Custom CSS part of the Squarespace menu. All I'm trying to add is some shading behind the text on my homepage. It shows up when I'm in Design/Custom CSS but then goes away when I return to the main menu, even after saving. Can anyone help? 

Page url: https://www.themichellecowan.com/ 

CSS added: 

#block-d6b457e24091aa47165d{background:#61616161;padding:50px;text-align:center;}

Hi. The color code has 6 characters, you used 8. try change background:#61616161; to background:#616161;

Hi there I am having a similar issue. Bit of a coding novice here so not sure how to resolve. Any help would be super appreciated. Perhaps an error in my code?

I have added this code to the Design/Custom CSS to help format the captions in my gallery. It shows up when I'm in Design/Custom CSS but then goes away when I return to the main menu, even after saving??

.gallery-caption p {white-space:pre; text-align:center}
.gallery-caption p:first-line {color: black; font-size: 1rem; font-weight:bold}
\ 

Thanks

On 3/3/2022 at 9:55 AM, bcdesign90 said:

Hi there I am having a similar issue. Bit of a coding novice here so not sure how to resolve. Any help would be super appreciated. Perhaps an error in my code?

I have added this code to the Design/Custom CSS to help format the captions in my gallery. It shows up when I'm in Design/Custom CSS but then goes away when I return to the main menu, even after saving??

.gallery-caption p {white-space:pre; text-align:center}
.gallery-caption p:first-line {color: black; font-size: 1rem; font-weight:bold}
\ 

Thanks

remove symbol

\ 

hi there, i wasn't aware that my issue was so recurrent until i've found this thread.

same problem here as everybody. fonts not showing til click the custom css area...

if someone can help, here's the website: 

https://cymbals-fennel-cr6g.squarespace.com/

here's the code...

@import url('https://fonts.googleapis.com/css?family=Darker+Grotesque:wght@300;400;500;600;700&display=swap');

@font-face {font-family: 'Darker Grotesque', sans-serif;}

.header-nav *, nav.header-menu-nav-list * {
font-family: 'Darker Grotesque', sans-serif; 
font-weight: 500;
}

p, p1, p2, p3, p4, p5 { 
font-family: 'Darker Grotesque', sans-serif; 
font-weight: 400;
}

.button { 
font-family: 'Darker Grotesque', sans-serif !important;
font-weight: 600 !important;
padding-top: 15px !important;
padding-bottom: 19px !important;
}

b, bold, strong { 
font-weight: 600;
}

h1, h2 { font-family: 'Darker Grotesque', sans-serif !important; 
font-weight: 500;
}

h3, h4, h5 { 
font-family: 'Darker Grotesque', sans-serif !important;
font-weight: 500;
}

h2.newsletter-form-header-title {
font-family: 'Darker Grotesque', sans-serif !important;
font-weight: 600 !important;
}

nav { 
font-family: 'Darker Grotesque', sans-serif; 
font-weight: 500;
}

h1 a, h2 a, h3 a, h4 a, p a {
text-decoration: none !important;
}

.sqs-block-html a {
background-image: none !important;
}

.form-wrapper .field-list .title {
font-family: 'Darker Grotesque', sans-serif; 
font-weight: 400;
}

.form-wrapper .field-list .field .caption {
font-family: 'Darker Grotesque', sans-serif; 
font-weight: 400;
}

.form-wrapper .field-list .description {
font-family: 'Darker Grotesque', sans-serif; 
font-weight: 400;
}

button.lightbox-handle {
font-family: 'Darker Grotesque', sans-serif; 
font-weight: 400;
}

.form-wrapper input[type=submit] {
font-family: 'Darker Grotesque', sans-serif; 
font-weight: 400;
}

.sqs-block-newsletter .newsletter-form-field-element {
font-family: 'Darker Grotesque', sans-serif; 
font-weight: 400;
padding-top: 12px !important;
padding-bottom: 15px !important;
}

.newsletter-block .newsletter-form-button {
font-family: 'Darker Grotesque', sans-serif !important; 
font-weight: 600 !important;
padding-top: 13px !important;
padding-bottom: 17px !important;
}

.sqs-block-summary-v2 {
.summary-title {
font-family: 'Darker Grotesque', sans-serif !important; 
font-size: 1.7em !important;
line-height: 1em;
}
  
.summary-heading {
font-size: 2em !important;
line-height: 1em;
}
  
.summary-excerpt p {
font-size: 1em !important;
line-height: 1em;
}
}

.blog-item-title h1.entry-title {
font-family: 'Darker Grotesque', sans-serif !important; 
font-weight: 500 !important;
line-height: 1em !important;
}

.item-pagination-title {
font-family: 'Darker Grotesque', sans-serif !important; 
font-weight: 500 !important;
}