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
  • 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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.