Jump to content

Help with overlapping sections in 7.1

Recommended Posts

I followed a tutorial (https://schwartz-edmisten.com/blog/floating-banner-over-two-index-sections-in-squarespace) to float a banner between two sections on a page I am building. All appears fine, but because the section is positioned absolute, much of the content from the below section is falling behind this. I can add some substantial padding to push the content downwards, but the issue I'm having is that when I change the window size and the floating box is expanding for mobile, the padding I apply doesn't properly correlate and it ultimately still gets lost.

Is there a way I ensure the content always sits below the overlapping box? Alternatively, I considered removing the absolute positioning – the issue with this is that I am left with a plain white background on this section behind the floating content and I can't seem to change the colour on this nor see where it's defined in the code?

Thanks! 

Screen Shot 2020-06-16 at 11.51.52.png

Screen Shot 2020-06-15 at 17.00.03.png

Link to comment
  • Replies 5
  • Views 4.2k
  • Created
  • Last Reply

Here's the site: https://abe-demo-71.squarespace.com/?password=demo

The CTA buttons are the floating content.

I think I figured it out (mostly by accident: this my first 7.1 site), but my coding is looking pretty messy:

 

[data-section-id="5eecf9ca7f4e1119cdb81826"] {
    width: 70%;
    position: absolute;
    min-height: initial!important;
    z-index: 30;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*&+section {
        padding-top: 40px;
    }*/
    .content-wrapper {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    @media screen and (max-width: 767px) {
        position: relative;
        min-height: initial!important;
        display: block;
        width: 100%;
        overflow: hidden;
        border-radius: 0px;
        -webkit-transform: translate(-50%, 50%);
        -ms-transform: translate(-50%, 50%);
        transform: translate(-50%, -15%);
    }
}
 

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.