Jump to content

Custom CSS with gradient background color stopped working

Go to solution Solved by Beyondspace,

Recommended Posts

Just got off a live chat for this issue with no result as they refuse to help me when it's related to custom CSS.

I've had code to have my background color every other section as an orange gradient and it has worked for about a year now. All of a sudden without any changes on the website for a good while, it has stopped working. The last thing I did was playing around with a plugin for a gallery and while working with it the gradients worked just fine. It also worked fine after this, so I don't think it causes the problem. Removing the code for it doesn't help either.

I tried to copy section-IDs again to make sure it was still the correct ones in the code, but nothing.

What could be the problem here? The gradients really made the whole website...

Link to comment
15 hours ago, Polyscans said:

Just got off a live chat for this issue with no result as they refuse to help me when it's related to custom CSS.

I've had code to have my background color every other section as an orange gradient and it has worked for about a year now. All of a sudden without any changes on the website for a good while, it has stopped working. The last thing I did was playing around with a plugin for a gallery and while working with it the gradients worked just fine. It also worked fine after this, so I don't think it causes the problem. Removing the code for it doesn't help either.

I tried to copy section-IDs again to make sure it was still the correct ones in the code, but nothing.

What could be the problem here? The gradients really made the whole website...

Can you share your site with the protected password so I can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment
  • 3 weeks later...
  • Solution
On 12/18/2022 at 2:10 AM, Polyscans said:

The website is public: https://grapefruit-frog-cpsc.squarespace.com/

It's live at polyscans.no. Not sure if you need more to take a look, I'll provide if you need anything else thanks.

You can try the following code on Home > Design > Custom Css

.page-section.background-width--inset .section-border {
  background: transparent;
}

Support me by pressing 👍  or marking as solution if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment
On 12/19/2022 at 4:47 PM, Beyondspace said:

You can try the following code on Home > Design > Custom Css

.page-section.background-width--inset .section-border {
  background: transparent;
}

Support me by pressing 👍  or marking as solution if this useful for you

Thank you so much, this seems to have solved it. So based on the code you provided and the small amount of knowledge I have about it, is it correct that the dark color were basically overlaying the gradient from my code?

Also, do you know what caused this? Only thing I can think of is upgrading sections to the Fluid engine, but I'm fairly certain that the gradient worked a while after upgrading so I'm not sure if it's even related.

Again, thanks!

Link to comment

Squarespace have just updated some new features and they add new element on section background. So it may cause your issue

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment
  • 2 months later...

Hello again,

I just jumped back into my website again and while the code you provided did fix most sections, there's actually still a few sections that still won't show my colors. Seems like the thing they have in common is that there's embed blocks on all of them.

Would you happen to know a way to fix these as well?

Link to comment
On 3/9/2023 at 7:46 PM, Polyscans said:

Hello again,

I just jumped back into my website again and while the code you provided did fix most sections, there's actually still a few sections that still won't show my colors. Seems like the thing they have in common is that there's embed blocks on all of them.

Would you happen to know a way to fix these as well?

Can you share link to page where you have problem? We can help easier

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 3/12/2023 at 2:59 AM, jennnnnnw said:

Hi all. I've experienced the same issue on my site. Has any resolution been discovered? Thank you!

Add this to Design > Custom CSS

.section-border {
  background: transparent;
}

 

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

Hey everyone, 

I'm having a similar issue. My website has Custom CSS for a light grey-dark grey gradient, which has all of a sudden stopped working. Now there is just a plain white background even though I haven't altered the code at all. 

It's strange because I have other custom CSS that is still working fine? Website is www.dojomediaco.com

Any advice would be appreciated! Here's the code I've been using for the gradient;

.page-section, .section-background{background:transparent!important;}
.site-wrapper{background: linear-gradient(to right, #fcfcfc, #e0e0e0)!important;}

 

Link to comment
On 3/17/2023 at 5:56 AM, LoganPearce said:

Hey everyone, 

I'm having a similar issue. My website has Custom CSS for a light grey-dark grey gradient, which has all of a sudden stopped working. Now there is just a plain white background even though I haven't altered the code at all. 

It's strange because I have other custom CSS that is still working fine? Website is www.dojomediaco.com

Any advice would be appreciated! Here's the code I've been using for the gradient;

.page-section, .section-background{background:transparent!important;}
.site-wrapper{background: linear-gradient(to right, #fcfcfc, #e0e0e0)!important;}

 

Change your code to this

.page-section, .section-background, .section-border, .section-divider {background:transparent!important;}
.site-wrapper{background: linear-gradient(to right, #fcfcfc, #e0e0e0)!important;}

 

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

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.