Jump to content

Squarespace Custom Divider (CSS)

Recommended Posts

Site URL: https://lohanne-quintella.squarespace.com

Hi there,

I am trying to get a custom section divider but I can't figure out how to me this work. When I add this code, the section gets upside down. If someone could give a hand, that would be greatly appreciated. I am using the follow code from this site: https://www.shapedivider.app

section[data-section-id="6238d5e7ce65a86aa6d2c041"],
.custom-shape-divider-bottom-1648231165 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1648231165 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 102px;
}

.custom-shape-divider-bottom-1648231165 .shape-fill {
    fill: #FFFFFF;
}

Edited by HunterD
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 3/26/2022 at 2:03 AM, HunterD said:

Site URL: https://lohanne-quintella.squarespace.com

Hi there,

I am trying to get a custom section divider but I can't figure out how to me this work. When I add this code, the section gets upside down. If someone could give a hand, that would be greatly appreciated. I am using the follow code from this site: https://www.shapedivider.app

section[data-section-id="6238d5e7ce65a86aa6d2c041"],
.custom-shape-divider-bottom-1648231165 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1648231165 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 102px;
}

.custom-shape-divider-bottom-1648231165 .shape-fill {
    fill: #FFFFFF;
}

 

URL: https://lohanne-quintella.squarespace.com

Pass: Lohannequintella

Do you mean you want to set this section the the following one into 2 columns in one row?

image.thumb.png.c3880107683a3276ee1ff018c68dcdc9.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.