Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
JButler

Help with overlapping sections in 7.1

Question

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

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

You can try position: relative with negative top?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Applied to the floating box instead of absolute? I still have a white background on this section which I don't seem to be able to edit?

Share this post


Link to post
  • 0

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%);
    }
}
 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...