Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
gm284

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

Question

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

Share this post


Link to post

13 answers to this question

Recommended Posts

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

 

Share this post


Link to post
  • 0

@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

COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


Link to post
  • 0
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.

Share this post


Link to post
  • 0

@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.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...