Jump to content

How to position divider on top of sections

Recommended Posts


Site: https://chipmunk-iguana-ffam.squarespace.com/
Password: amanda2024!

Hi there.

I am making this website for a client and I have troubles solving this issue, so I hope some on you can help.
I have used SquareKicker to make a Sticky split section (with section[data-section-id="66315b8eaa6dc217b803efad"] and section[data-section-id="6605b2f2eb18fa5170d792ca"]), but now when I try to add a divider, there is this white space in between the section and the divider. Is it possible to do something to remove the white space?

And also - is there a way for me to add a the divider look I have used at the top of a section instead of the buttom. I want it to be at the buttom of the Sticky Split Sections, but when I add a divider it makes to seperate dividers since it is two different sections, but I want it to look like all the others.

I attached some screenshots. I hope it makes sense.

THANK you!

Skærmbillede 2024-05-01 kl. 00.06.13.png

Skærmbillede 2024-05-01 kl. 00.06.07.png

Link to comment
1 hour ago, DavidStewart said:

I checked that you already managed to fix the issue. But if not, then I suggest you to add css padding instead of using the divider block. Let me know if you need any help.

I haven't fixed the issue. Not at the bottom at least. Would you be able to help me with the css for this?
Thank you so much for responding this fast!

Link to comment

At the bottom the issue is also that the divider gets split between the two sections because I have used a Sticky Split Section setting in Squarekicker.

Link to comment
Posted (edited)
1 hour ago, DavidStewart said:

Your website password not working. 

yup. pw not working. HOWEVER, i just used a custom divider on my site at the top of the section that works fine, but you can definitely make a custom divider at the bottom instead. On my site I used a nearly identical code to get a custom page tear divider on the top of a section. You can see that here (i added parallax to make it scroll OVER the landing section on that page):   www.aspiremusicgroup.com/branding


If you want that, but at the bottom... I believe this MIGHT be what you're looking for:


  .section-background {
  overflow: visible;
      &:after {
    content: '';
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: inherit;
  -webkit-mask: url(---> URL OF CUSTOM FILE HERE <---) top no-repeat;
    mask: url(---> URL OF CUSTOM FILE HERE <---) top no-repeat;
    margin-bottom: 1px;
    transform: translateY(100%);
    position: absolute;
    pointer-events: none!important;
    z-index: 2;
    @media screen and (max-width: 800px) {
      -webkit-mask-size: 300% 50%;
              mask-size: 300% 50%;


Edited by LeauxFi
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.