Fix linear gradient between sections

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!

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.

sure! 

https://www.youbynatseleen.com/education

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

Thanks @Ziggy 🙂

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.

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!

Thank you @Ziggy! However it hasn't worked and removed the gradient all together unfortunately 😞 see code in the custom css box on the left! 

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

It's taking the whole effect off completely, I also tried to adjust the rgb/rgba's as is coded for my other page and that hasn't worked either 

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