Jump to content

Trying to get images to float off screen but running into margin or site width issue

Recommended Posts

Site URL: https://caterpillar-antelope-pr8a.squarespace.com

Password:  BMG

 

I have attached a screenshot of what i am hoping to achieve without having to use the image as a banner background.

 

Basically, i have a few images that i would like to appear to the far edge (either all the way right or left of a section and bleed off the page) but i appear to be getting some extra scrolling past the site margins or site width (honestly not sure which).

 

was able to stumble through some code to get the image in question to the appear in the general area i want it to but i would like it contained to the section its in border if that makes sense. (dont want the bottom portion overlapping the section below it) and would like to remove the black bar that is now added to the right hand side of the page.

 

any help would be greatly appreciated as this is a problem i will have with several other sections of this build.

 

Screen Shot 2022-03-28 at 10.26.26 PM.png

Screen Shot 2022-03-28 at 10.27.19 PM.png

Link to comment
3 hours ago, zsawtelle1 said:

Site URL: https://caterpillar-antelope-pr8a.squarespace.com

Password:  BMG

 

I have attached a screenshot of what i am hoping to achieve without having to use the image as a banner background.

 

Basically, i have a few images that i would like to appear to the far edge (either all the way right or left of a section and bleed off the page) but i appear to be getting some extra scrolling past the site margins or site width (honestly not sure which).

 

was able to stumble through some code to get the image in question to the appear in the general area i want it to but i would like it contained to the section its in border if that makes sense. (dont want the bottom portion overlapping the section below it) and would like to remove the black bar that is now added to the right hand side of the page.

 

any help would be greatly appreciated as this is a problem i will have with several other sections of this build.

 

Screen Shot 2022-03-28 at 10.26.26 PM.png

Screen Shot 2022-03-28 at 10.27.19 PM.png

Try adding to Home > Design > Custom Css

section[data-section-id="624263f2c2778f6d90446f5e"] {
  overflow: hidden;
}

Let me know how it goes

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

My testing

image.thumb.png.1a9aeb451240bb212e045f5313e4dbef.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 minutes ago, zsawtelle1 said:

That seems to have solved the issue on desktop but is now hidden on mobile, any suggestions to keep it visible there?

We can achieve it via media query

@media only screen and (min-width: 1024px) {
  /*style for desktop breakpoint*/
  section[data-section-id="624263f2c2778f6d90446f5e"] {
    overflow: hidden;
  }
}
Edited by bangank36

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

alright final question here, works at that breakpoint but when i change screen size it moves the image up,

 

tried the code below to get it to stay fixed to the bottom of the section but no luck, any pointers?

 

   position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;

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.