Jump to content

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

Recommended Posts

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.

Edited by gm284
added tags
Link to comment
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 */
}

 

Link to comment

@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

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
  • 8 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?1299968006_ScreenShot2020-07-07at2_45_21PM.thumb.png.40c5f02f04614fdf35036d919d32f2a3.png

 

Link to comment

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

Link to comment
  • 7 months later...

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?

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...

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

Edited by ChelleChelle
Link to comment
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;

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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

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.