Custom CSS applying to section and blocks instead of only on section

Hello!

I'm trying to build a visual separator (a diagonal) between two sections

For this I am using the following code:

[data-section-id="5f12b8feec2e7d1136cf635c"] ::before

	{
          content: '';
          width: 100%;
          height: 100%;
          background: linear-gradient(177deg, rgba(255, 255, 255, 0) 87%, #f2ebdf 87.2%);
          position: absolute;
          top: 0;
          left: 0;
	}

This code works except that the diagonal shape is also shown for block elements

Does anyone know what I am doing wrong?

Many thanks for your help in advance!

I've just seen that there is a text-block within the section I want to format with CSS. I tried deleting this text-block, which is unfortunately not working. After confirming the deletion of the block it appears again. 

Please give us the URL for the page you are working on. If you've not already done so please set up a site-wide password. Post the password here and then we can take a look at your issue.

Apologies, forgot to share the URL: https://octopus-pineapple-yxw8.squarespace.com/
The password is: luca1234

Thanks for having a look!

Try the following CSS.
 

[data-section-id="5f12b8feec2e7d1136cf635c"] .section-background::before {

  background: linear-gradient( 177deg, rgba( 255, 255, 255, 0 ) 87%, #f2ebdf 87.2% );
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  
  }

/* this one won't be seen */

[data-section-id="5f12b8feec2e7d1136cf6360"] .section-background::before {

  background: linear-gradient( 177deg, rgba( 255, 255, 255, 0 ) 87%, #f2ebdf 87.2% );
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  
  }

[data-section-id="5f12ba572a5a724d4ae28377"] .section-background::before {

  background: linear-gradient( 177deg, rgba( 255, 255, 255, 0 ) 87%, #f2ebdf 87.2% );
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  
  }

Let us know how it goes.

6 hours ago, creedon said:

[data-section-id="5f12b8feec2e7d1136cf635c"] .section-background::before {   background: linear-gradient( 177deg, rgba( 255, 255, 255, 0 ) 87%, #f2ebdf 87.2% );   content: '';   height: 100%;   left: 0;   position: absolute;   top: 0;   width: 100%;      }

Works perfectly! Thanks a lot @creedon! 🙂

An additional thing we found now is that even though the width is set to "100%" it doesn't work fine on the second section on the site

Site: https://octopus-pineapple-yxw8.squarespace.com/

@creedon any idea what's happening here?

4 hours ago, immiike said:

@creedon any idea what's happening here?

I don't know what is going on there. It looks good on my setup.

Nice and linear looking to me. I'm on macOS using Chrome. I also checked on Safari.

Tell us more about your OS and browser.

Perhaps others would take a look and report what they see?

At least if we can narrow it down somewhat that would give us a direction to go.

I am on macOS as well using Chrome. It looks weird to me in Chrome.

8 hours ago, immiike said:

I am on macOS as well using Chrome

Have you updated Chrome lately? I'm running Version 85.0.4183.121 (Official Build) (64-bit). Just trying to eliminate possibilities.

Wouldn't hurt to restart the computer as well. Get a fresh start.

Also can you go to another computer and browser and see if you still see the issue?

Issue persists on various screens, computers and browsers 😞