Adding section gradients to image backgrounds so sections flow into each other (Issue 7.1)

Site URL: https://rachel-dickstein-dev.squarespace.com/director/blood-moon-2

/*blood moon */
section[data-section-id="62422a5b8f70047a56eea75d"]
.content-wrapper
{
  width:100%!important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(77, 72, 106, 1));
  z-index: 1;
  max-width: inherit;
}

On 4/6/2022 at 4:28 AM, raeroshow said:

Site URL: https://rachel-dickstein-dev.squarespace.com/director/blood-moon-2

https://rachel-dickstein-dev.squarespace.com/director/blood-moon-2 

PW:  The@ter2022

Hi all! 

I am tying to add a color gradient so that the purple section blends into the image section above it. I've been able to do this in the past, but on this page, it doesn't look good on small screens / mobile. Looks like the overlay isn't tall enough so a gap is showing. I tried adding "height" to my code to no avail. Anyone got the trick to fix? Is it that my image itself isn't tall enough?

Thanks!

Rachel 

 

This is the CSS I added: 

/*blood moon */
section[data-section-id="62422a5b8f70047a56eea75d"]
.content-wrapper
{
  width:100%!important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(77, 72, 106, 1));
  z-index: 1;
  max-width: inherit;
}

PS 

@julians - saw you asked a similar questions so  I'm adding you! 

 

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 640px) {
  section[data-section-id="62422a5b8f70047a56eea75d"]  .content-wrapper {
    padding-top: 31vmax !important;
  }
}

Let me know how it works on your site

My testing