Jump to content

Fix linear gradient between sections

Recommended Posts

Hey all! 

 

I have an issue with the gradient overlay that I've used between the sections on my website for a client. I don't think it was doing this previously, and it's not an issue on mobile version, but what to know if there's something I can do to stop this from happening. As you can see in the screen recording, I've used the same code for another page (about us) and it's not doing the same thing.

 

Thanks!

 

Link to comment

It looks like the problem is coming from the parallax effect on the background image, but would be easier to check if you could share your website URL.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 minute ago, Gigi-C said:

I always add it when it asks me to before I post a discussion.. I thought it shows up! 

Nope, that never comes through with the question.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You need to adjust your code so it doesn't target the section content (with .content-wrapper) but the section background (with .section-background) like this:

section[data-section-id="64ca4120ff73c555d9acab5d"] .section-background {
    width: 100% !important;
    background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,#141414 90%,#1c1c1b 100%);
}

I would suggest making this change for all of the sections that you are adding this to.

Give me a like if that works!

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

That's strange, it works fine on my test site.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

So I added this line of code: 

 

padding-top: 10vmax !important;

 

 to the original code I had and it worked!

 

section[data-section-id="64ca4120ff73c555d9acab5d"] .content-wrapper
{
  width:100%!important;
  padding-top: 10vmax !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(20, 20, 20, 1) 90%, rgba(28,28,27,1.000) 100%);
  z-index: 1;
  max-width: inherit;
}

 

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.