Jump to content

Floating Block - Need help with spacing

Recommended Posts

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

Screen Shot 2021-11-05 at 4.59.13 PM.png

Screen Shot 2021-11-05 at 4.59.25 PM.png

Screen Shot 2021-11-05 at 4.59.32 PM.png

Link to comment
  • Replies 8
  • Views 807
  • Created
  • Last Reply

Top Posters In This Topic

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

Screen Shot 2021-11-05 at 4.59.13 PM.png

Screen Shot 2021-11-05 at 4.59.25 PM.png

Screen Shot 2021-11-05 at 4.59.32 PM.png

Hi,

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

image.thumb.png.e002d1c88620d6917b442e7f8db55045.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 months later...

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

 

 

Screenshot 2022-02-02 at 13.53.56.png

Screenshot 2022-02-02 at 13.50.10.png

Edited by MillyBanks
Link to comment
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;
}
 

 

 

Screenshot 2022-02-02 at 13.53.56.png

Screenshot 2022-02-02 at 13.50.10.png

Which page in screenshot?

image.thumb.png.43af6c61b4cff9dbfbeb1f54b80ce9c5.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.