Jump to content

neighboring text blocks merge in to a single entity

Recommended Posts

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.

Link to comment
  • 10 months later...
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  ⬇️

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

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: 

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


Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.