Trying to Create Custom Section Dividers in 7.1

Hello,

I am trying to create some custom, irregular borders for my sections in 7.1. I have searched up and down, and have not found a simple solution that currently works. I tried https://schwartz-edmisten.com/blog/custom-section-divider-in-squarespace but the code did not work and in the comments below the article, Chris Schwartz-Edmisten says that his code no longer works with Fluid Engine. I ended up finding this solution by Ryan Dejaegher https://ryandejaegher.com/how-to-make-wavy-section-transitions-in-squarespace-7.1/ using SVGs and CSS clip-paths.

The process of creating the code for the SVG paths is very complicated (you have to insert it into the footer code injection), but it seems to have worked OK. Unfortunately, there are two problems:

1. When changing the size of the browser window (I am using Chrome), there sometimes seems to be a thin white line that separates the aqua background color of the section I am targeting and the irregular SVG shape. Depending on how you re-size the window, the white line appears and disappears. Having the line there really ruins the illusion of the irregular shape. I have attached a screen shot of what it looks like.

2. Inserting these SVG clip-paths seems to have added some unwanted extra white space at the bottom of the page.

Does anyone have any ideas about either a) a simpler approach that works either with SVG or PNG shapes in the current version of 7.1, or b) a way to fix the two problems stated above?

Here is the code:

/* Adds downward facing wave to bottom of aqua section */
[data-section-id="6387b11f2aa80e0cd874d25a"] {
  position:relative;
}
[data-section-id="6387b11f2aa80e0cd874d25a"]:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
  background: #98d4d7	;
  clip-path: url(#wave-bottom);
}
/* Adds upward facing wave to bottom of white section */
[data-section-id="6387b11f2aa80e0cd874d253"]:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100px;
  bottom: 0;
  left: 0;
  background: #98d4d7	;
  clip-path: url(#wave-top);
}

The website is: https://bell-orange-3fdd.squarespace.com/ and the password is "irregular".

Thank you in advance for your help!

- Jesse

Hi,

Try checking on real devices. I usually use Chrome Dev Tool to test responsive sites and I noticed that the white line sometimes appears in a lot of places, but then if I adjust the width a little it disappears, so I believe this is a problem. error does not appear in real device.

Thanks for your reply, tuanphan-- the white line artifact I see is on a real device-- browsing using Chrome on my desktop computer (Mac).