Floating Block - Need help with spacing

Hello!

I have a website where I am trying to float a block over the main banner at the top. I have used the code below. I attached a screenshot of what it looks like. It's getting close but unfortunately there's a lot of empty space beneath the floating block and the next section. In another instance I have larger text and in mobile it goes completely over the banner image at the top. Is there any way to fix this? Thank you! I'm currently helping a client on a trial version so unfortunately I don't have an active link. 

//Home Float Block//
section[data-section-id="6181e6a07af15d314bbf9efc"] {
   background-color: transparent;
   width: 80%;
   position: absolute;
   z-index: 30;
   left: 50%;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
}
section[data-section-id="6181e6a07af15d314bbf9efc"] .sqs-block-code {
   padding: 0px;
}

24 minutes ago, ericams33 said:

Hello!

I have a website where I am trying to float a block over the main banner at the top. I have used the code below. I attached a screenshot of what it looks like. It's getting close but unfortunately there's a lot of empty space beneath the floating block and the next section. In another instance I have larger text and in mobile it goes completely over the banner image at the top. Is there any way to fix this? Thank you! I'm currently helping a client on a trial version so unfortunately I don't have an active link. 

//Home Float Block//
section[data-section-id="6181e6a07af15d314bbf9efc"] {
   background-color: transparent;
   width: 80%;
   position: absolute;
   z-index: 30;
   left: 50%;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
}
section[data-section-id="6181e6a07af15d314bbf9efc"] .sqs-block-code {
   padding: 0px;
}

Hi,

Can you share your site with the protected password to check your issue?

Hi! Yes please see the site below:

https://vuvuzela-burgundy-8tad.squarespace.com/ 

PW: JMF

It seems fine on your site, doesn't it?

I don't want to have the block overlapping the images. Here's the mockup that I want it to look like:

Hi @bangank36

I am wondering if you could help. 

I am arranging some overlapping photographs at the top of my website. 

Is there a way I can stop them from disappearing behind the navigation bar when the browser is resized? 

Url: https://porcupine-duck-zbe8.squarespace.com/about

//About Header Image

#block-yui_3_17_2_1_1643757921884_4266
{
  position:relative;  
  padding: 0px ! important;
  margin-top: -12% !important;
  margin-left: -12% !important;
  margin-right: -4% !important;
}

#block-yui_3_17_2_1_1643757921884_4266
{
position: relative;
z-index: 1;
}

//About

#block-yui_3_17_2_1_1643807699720_2685, #block-yui_3_17_2_1_1643807699720_3678

{border: 5px solid #BBCED8!important;
background: #BBCED8!important;}

//Block Overlap (on top)

#block-yui_3_17_2_1_1643807699720_2685{
position: relative;
z-index: 100;
  top: -18em;
  right:-40%;
  left:40%;
  width: 50%
}

//Block Overlap (underneath)

#block-yui_3_17_2_1_1643807699720_3678{

position: relative;
z-index: 90;
   top: -29em;
left: -20%;
  right:120%;
  width: 70%
}

#about .Index-page-content {
  margin-top: 10px;
  margin-bottom: -280px!important;
}
 

23 hours ago, MillyBanks said:

Hi @bangank36

 

I am wondering if you could help. 

I am arranging some overlapping photographs at the top of my website. 

Is there a way I can stop them from disappearing behind the navigation bar when the browser is resized? 

Url: https://porcupine-duck-zbe8.squarespace.com/about

//About Header Image

#block-yui_3_17_2_1_1643757921884_4266
{
  position:relative;  
  padding: 0px ! important;
  margin-top: -12% !important;
  margin-left: -12% !important;
  margin-right: -4% !important;
}

#block-yui_3_17_2_1_1643757921884_4266
{
position: relative;
z-index: 1;
}

//About

#block-yui_3_17_2_1_1643807699720_2685, #block-yui_3_17_2_1_1643807699720_3678

{border: 5px solid #BBCED8!important;
background: #BBCED8!important;}

//Block Overlap (on top)

#block-yui_3_17_2_1_1643807699720_2685{
position: relative;
z-index: 100;
  top: -18em;
  right:-40%;
  left:40%;
  width: 50%
}

//Block Overlap (underneath)

#block-yui_3_17_2_1_1643807699720_3678{

position: relative;
z-index: 90;
   top: -29em;
left: -20%;
  right:120%;
  width: 70%
}

 

#about .Index-page-content {
  margin-top: 10px;
  margin-bottom: -280px!important;
}
 

 

 

Which page in screenshot?

Hi @tuanphan the URL is above - /about 

I am also doing this on /silver-select with three images 

On 2/3/2022 at 8:22 PM, MillyBanks said:

Hi @tuanphan the URL is above - /about 

 

I am also doing this on /silver-select with three images 

 

 

You used this code, it won't look good on all devices. You need to change some values on specific devices

#block-yui_3_17_2_1_1643807699720_3678 {
    position: relative;
    z-index: 90;
    top: -29em;
    left: -20%;
    right: 120%;
    width: 70%;
}

You can add more some CSS like this

@media screen and (min-width:641px) and (max-width:900px) {
    #block-yui_3_17_2_1_1643807699720_3678 {
        top: -15em;
    }
}
@media screen and (min-width:901px) and (max-width:1020px) {
    #block-yui_3_17_2_1_1643807699720_3678 {
        top: -10em;
    }
}

(You can adjust values for exact screen sizes)