Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


immiike

Question

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 post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Works perfectly! Thanks a lot @creedon! 🙂

Posted Images

10 answers to this question

Recommended Posts

  • 0

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. 

Link to post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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! 🙂

Link to post
  • 0
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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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?

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...