Jump to content

Trying to Create Custom Section Dividers in 7.1

Recommended Posts

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

Screen Shot 2022-11-30 at 11.45.15 AM.png

Link to comment
  • Replies 2
  • Views 663
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.