Jump to content

Custom CSS not loading properly

Recommended Posts

I've got a bit of custom CSS on a client site that I just noticed is suddenly not loading properly. It's as if the CSS isn't there anymore, but on page refresh, it works just fine. Any reason for this? Is anyone else having this issue also? 

NOTE: the CSS code itself was working last time I checked the site a couple weeks ago and nothing has changed since then (that I know of); I haven't edited the CSS since it was implemented some time last year.

ATTACHMENT: This is a screenshot of a customized social media landing page, so I've customized the button widths here to look normal on phone-size screens. So, the buttons have CSS to standardize their width, the Back To Top button in the bottom right corner is CSS too. You can see the BTT button code is working in this screenshot, but the button width code isn't. Another time I refreshed it & it worked fine; refreshed it again and the hex color code for the red Back To Top button was showing at the top of the page with no other code visible. All really weird behavior I haven't seen before, seemingly not due to any recent/additional CSS changes.

 

Thanks!

Screen Shot 2020-01-06 at 4.16.14 PM.png

Link to comment
  • Replies 5
  • Views 4.1k
  • Created
  • Last Reply

Hi Katelyn @katelyndekle

Is it possible that you placed the CSS somewhere other than in Design > Custom CSS?

If you're using a newer 7.0 template that supports Ajax, that's the only place to put the CSS. If you put it anywhere else it will appear to load fine when you're logged on (or when you hit refresh) but for every other visitor, it simply won't work. If this indeed the issue, here's a guide that I wrote (a while ago!) to explain.

If it's not the issue, please help us to see the issue first hand by providing us with a working link to the website.

-Paul

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
On 1/6/2020 at 6:05 PM, paul2009 said:

Hi Katelyn @katelyndekle

Is it possible that you placed the CSS somewhere other than in Design > Custom CSS?

If you're using a newer 7.0 template that supports Ajax, that's the only place to put the CSS. If you put it anywhere else it will appear to load fine when you're logged on (or when you hit refresh) but for every other visitor, it simply won't work. If this indeed the issue, here's a guide that I wrote (a while ago!) to explain.

If it's not the issue, please help us to see the issue first hand by providing us with a working link to the website.

-Paul

Hi Paul! Thanks for the reply. 🙂 No, it's all in the custom CSS design area of the site. That site was created last Dec 2018, so not terribly new. I've been using Squarespace since 2016, so not a super long-time user but pre-7.1 era for sure. 

Oddly, the issue seemed to only occur that day and went back to normal the following day. I'm going to check out your guide anyway though, just in case it helps in the future. Thank you for sharing!

Link to comment
  • 1 month later...

My site started to have this issue as I've been editing it this week. Even now, sometimes it loads some of the CSS, and other times it doesn't.
I wanted the page to be FULL width, and Squarespace seems to make sure on the template i'm on that there's always a minimum of 17 px. So, I had to put in CSS to negate that. Sometimes it doesn't load that part of the css, and i'm assuming the template code is being loaded after instead (which it shouldn't be). It's becoming annoying as I like the template I have, but I don't know if I can easily move all the code to developer mode and adjust it more easily so that these weird issues don't occur. 
 

Link to comment

It would be very unusual for the CSS not to be loaded. Perhaps your CSS is just not specific enough and is overridden by built-in CSS or inline styles @StudioVulcan? If you provide a public site/page URL and examples of the CSS, we can take a look.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
18 minutes ago, paul2009 said:

It would be very unusual for the CSS not to be loaded. Perhaps your CSS is just not specific enough and is overridden by built-in CSS or inline styles @StudioVulcan? If you provide a public site/page URL and examples of the CSS, we can take a look.

https://www.studiovulcan.com/portfolio

I feel like that wouldn't be the case if a refresh loads it properly? But, i'm not an expert on this stuff, i have to fiddle for a while to figure it out. Then of course you add mobile stuff into the mix and all hell breaks loose because I have to figure out a way for it to not effect mobile, too. 😛

AHHHHH you know what. It's what you were referring to. I felt that last night I had to inject it. I just put it into the custom CSS and now it seems to work. If i see it glitching again, i'll return. So basically, don't inject anything into pages now. That's going to make things harder for myself, but if it keeps the site consistent, that's what I need to do! 🙂

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.