neighboring text blocks merge in to a single entity

Site URL: https://saffron-butterfly-a26f.squarespace.com

I have come across an odd situation concerning text blocks.

What I did (and was moderately successful):
I was trying to put a horizontal line under a text block in the footer (it is an H4 designation). I successfully completed this with the following CSS code:

#block-yui_3_17_2_1_1614021495603_13173 {border-bottom: 1px solid #fff;}

Under the text block was the social media icon list.

I also wanted to have a menu on a second text block (it is immediately to the right after a spacer) so I used essentially the same CSS only targeting a different block:

#block-yui_3_17_2_1_1614021495603_27864 {border-bottom: 1px solid #fff;}

This (unsurprisingly) successfully put a line under the "Menu" header text. I proceeded to enter a "dummy" menu in a text block below the "Menu" text block. I saved it. When the page was reloaded, though the border was underneath the "dummy" menu text block and not the "Menu" title text block.

What I would like to happen:

Simply, I would like the border to be under the "Menu" title text block and not the actual menu.

Some additional information which may be useful:

The two text blocks in question (Menu title and Menu text) still have their respective separate references.

I also tried the horizontal rule content block, but the padding was just too large.

Hi. Your site is private. Can you setup password & share url?

On 2/28/2021 at 4:53 AM, tuanphan said:

Hi. Your site is private. Can you setup password & share url?

Thank you for the response, but I figured out a way around the issue I was having.

This happens to me often.  Can you share the resolution?

14 hours ago, roattw said:

neighboring text blocks merge in to a single entity.

This happens to me often.

This is normal. If text elements beside each other, there is no benefit in having separate blocks, so they will merge into one. Whilst you are building your page, you can add Line Blocks (or Spacer Blocks) between them to prevent them merging. When you are ready to save your page, delete the Line Blocks.

If you have a reason for requiring two separate vertically-stacked Text Blocks you may want to consider using a Markdown Block in place of one of them.

We like to know if our posts help. Please consider clicking a 'Like' or 'Thanks' icon below  ⬇️

Should be an option.  There are actual reasons to have next to each other.  For example, I use a third-party accordion script that works great, Accotabs.  It collapses all content between two markdown boxes into an accordion.  So it looks like this:

[Markdown block code 1]
Accordion 1 content
[Markdown block code 2]

[Markdown block code 1]
Accordion 2 content
[Markdown block code 2]

So as you build accordions it merges the 2 adjacent markdown blocks, breaking the functionality.

Interestingly, it doesn't always do this.  I have some pages where this wasnt a problem.  Maybe browser version makes a difference?  And I have had instances where I have tried to get some text with images or layout just so, and actually did need to use a new text block to make it work.  But it would do the merge thing.

Here is the Markdown unwanted merge in action: 
https://iplayerhd.com/player/video/3de8d470-b569-4be6-8529-2661e237b06a/share

2 hours ago, roattw said:

Interestingly, it doesn't always do this.  I have some pages where this wasnt a problem.  Maybe browser version makes a difference?

Understanding the text blocks merging/not merging is a bit tricky. As @paul2009 mentions using a line or spacer block temporarily to prevent the merge is a great technique. The thing to remember is that once you remove the line/spacer block the merge behaviour will resume if any one of two vertically aligned text blocks are edited again. So what appears to be inconsistent behaviour in not in fact inconsistent.

A tip. You can again prevent merging when editing two vertical blocks by inserting the line/spacer block. Alternately use the line/spacer block but hide it with CSS. Something like the following.

/*

  not active in SS preview
  
  replace the block id with your own
  
  */

html:not( .squarespace-damask ) #block-yui_3_17_2_1_1642275887934_4178 {

  display : none;
  
  }