Float image over two index blocks

Site URL: https://bell-design-2020draft.squarespace.com/config/

Hello, I have managed to find some code to float one image, aligned to the right side of my home page, over two other blocks (see screenshot).

But two problems -

1) I also want to add a secondary float image further down on the page, but left aligned this time. Tried copying this code and messing with the values but that didn't work, and I just don't know enough about coding really.

Here is the code I'm currently using...what needs to change to get it left aligned?

#float-1 {width: 80%;
position: absolute;
min-height: initial!important;
z-index: 30;
left: 60%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
.Index-page-content {padding: 3em 2em;}
& + section {padding-top: 80px;}
}
#float-1 {background-color:rgba(0,0,0,0);}

And 2) the image does not shrink in mobile responsive view. Am I missing another piece of code for that?

Any help would be awesome, have spent two days already trying to figure this out :0

Thank you!

14 hours ago, VanessaBell said:

Site URL: https://bell-design-2020draft.squarespace.com/config/

Hello, I have managed to find some code to float one image, aligned to the right side of my home page, over two other blocks (see screenshot).

But two problems -

1) I also want to add a secondary float image further down on the page, but left aligned this time. Tried copying this code and messing with the values but that didn't work, and I just don't know enough about coding really.

Here is the code I'm currently using...what needs to change to get it left aligned?

#float-1 {width: 80%;
position: absolute;
min-height: initial!important;
z-index: 30;
left: 60%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
.Index-page-content {padding: 3em 2em;}
& + section {padding-top: 80px;}
}
#float-1 {background-color:rgba(0,0,0,0);}

 

And 2) the image does not shrink in mobile responsive view. Am I missing another piece of code for that?

Any help would be awesome, have spent two days already trying to figure this out :0

Thank you!

Your site is private, please provide site wide password to help

Oh my gosh, of course you'll need the password! Sorry, and thanks in advance for any help!

Password:  10:012Day!

Vanessa

11 hours ago, VanessaBell said:

Oh my gosh, of course you'll need the password! Sorry, and thanks in advance for any help!

Password:  10:012Day!

Vanessa

Would you mind to replace the current custom css with these code

section[id*=float] {
  background: transparent;
  width: 150px;
  position: absolute;
  min-height: initial !important;
  z-index: 30;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
section[id*=float] .Index-page-content  {
  padding: 0;
}
section[id*=float] [class*=sqs-col]{
  width: 100% !important;
}
section[id*=float] .sqs-block-spacer {
  display: none;
}
section#float-1 {
  right: 0;
}
section#float-2 {
    left: 0;
}
@media only screen and (max-width: 640px) {
      section#float-1 {
          width: 100px;
      }
      section#float-2 {
         width: 100px;
      }
}

Yes!  Thank you so much!!  It does need a little extra padding so it's not so close to the edge of the browser window. How can I adjust that?

Try to edit the left and right value to like 10px...

No, that took it all the way across the page. Tried different values, 0.5, or even -0.1. Everything takes it all the way to the other side ??

@bangank36 feel free to go take a look. I have to go out for a couple hours but will check back later. Again, thank you for your help with this!

Yes, that worked, thank you!!!