Separators are being applied to whole page and not the section I've created it on

Description:

I am having an issue when using separators on a section. For some reason, if I use a bottom separator on a section, it doesn’t add the separator to the bottom of the section but it adds the separator to the bottom of the page.

Step-by-step reproduction instructions:

  1. Create a new page
  2. Open the Post Editor/Site Editor for that page
  3. Create a new section
  4. In the section design tab, go down to the “Effects” and then click “Separators”
  5. Create a bottom separator
  6. Save and publish the page then visit the page in your browser and you will see that the separator is applied to the bottom of the page instead of to the bottom of the section

Screenshots:

Environment info

  • WordPress version: 6.1.1
  • Gutenberg Plugin version: -
  • Cwicly Plugin version: 1.2.9.2.3
  • Cwicly Theme version: 1.0.3

Temporarily, you can fix this by creating custom code on the section with the following code:

image

Hey there @LxrdKxnny and welcome to the community.

I think you need to apply a position of relative to your section to make it work.

Let me know if it helps.

2 Likes

Hey,

Thanks so much for your response!

I fixed it with relative positioning on the section - I just thought perhaps that would have been done automatically when applying the separator to the section.

1 Like

You actually don’t need custom CSS here, you have control of most of the properties inside the block inspector.

Applying styling automatically based on other settings wouldn’t make sense to be honest.
It’s raw CSS, so you need to take care of it.
The separators are positioned absolute, so it’s required to add a relative position to the parent.

2 Likes

I didn’t realise. Thanks so much for clarifying that! :slight_smile:

I just had this happen when I was trying to put a bottom separator on the first div on my page - when I added a second div the separator disappeared. Very frustrating and counter-intuitive for a non-developer.

Hi,

This is currently a limitation with the backend where Gutenberg adds position:relative; by default.
We are aware of the inconvenience.

Best regards,
Johnny

I see - ok, thank you for the update Johnny!