Jump to content

Page Breaker customization

Recommended Posts

Site URL: https://sponge-marigold-3pbn.squarespace.com/config/design/custom-css

Hi there, 

I've applied this code

.page-section:not(.has-background) {
  .section-background {
    overflow: visible;
  }
  .section-background:after {
    content: '';
    position: absolute;
    left: calc(~"50% - 20px");
    bottom: -20px;
    width: 40px;
    height: 40px;
    z-index: 1;
    background-color: inherit;
    transform: rotate(45deg);
  }
}

To get a overlapping central triangle on my page sections, however it's also applied to the very first and last section which I don't want it to which is making it look weird. the other sections are fine but I just don't want it to apply to the first and last - please help? Please see the images attached 

Screenshot 2020-10-20 at 09.59.41.png

Screenshot 2020-10-20 at 10.02.46.png

Link to comment
  • Replies 3
  • Views 440
  • Created
  • Last Reply
.page-section:not(.has-background) .section-background {
    overflow: visible;
}

.page-section:not(.has-background):not(:first-of-type):not(:last-of-type) .section-background::after {
    content: '';
    position: absolute;
    left: calc(50% - 20px);
    bottom: -20px;
    width: 40px;
    height: 40px;
    z-index: 1;
    background-color: inherit;
    transform: rotate(45deg);
}

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.