Jump to content

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

Recommended Posts

Hello!

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

image.png.61fd8b0e75355516604431b5d02acf4d.png

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

image.thumb.png.f4b9dc8c61fcea3a4d139f81dc0d00ad.png

Does anyone know what I am doing wrong?

Many thanks for your help in advance!

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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.

1166492735_ScreenShot2020-09-29at4_18_18PM.png.ec73c6cd56e1d3bdfe021b8e69ac855a.png

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.