Jump to content

Float image over two index blocks

Recommended Posts

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!

Screen Shot 2020-12-16 at 2.08.45 PM.png

Link to comment
  • Replies 9
  • Views 441
  • Created
  • Last Reply
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!

Screen Shot 2020-12-16 at 2.08.45 PM.png

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

 

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

image.thumb.png.49419b9afc025e41bc1015cd4e93cf2b.png

image.png.314fb0ad9905bd7e743dc56592aa9293.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

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

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

image.thumb.png.f3754e52c7ef8cf225db327adeeba69f.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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.