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

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.

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.

 

Try adding to Home > Design > Custom Css

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

Let me know how it goes

My testing

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

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

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;

messed around with it for a while, think i figured it out, at certain breakpoints it doesnt stick to the bottom as it should but i managed to get it to a workable area