Disable squarespace animation/min-height/padding-top changing on scroll-down?

Site URL: https://www.joannefoxpainting.com

I have not seen this kind of animation before, and I can't seem to disable it with any code that I have tried. I am not very advanced, so maybe I am missing something simple, but would appreciate any help! 

The site (joannefoxpainting.com) is finalized, except there is a scrolling animation I cannot get rid of on the home page. The min-height and the padding-top seem to be animated or automatically updating as you scroll to the bottom of the page, resulting in a zoom effect on the banner image. I have all effects off, I don't know how to fix it. My css fixes did not work. I can see it automatically updating in the inspector as I scroll, but it says "animation: none" and I can't seem to find out how to get it to stop updating like that. Is this part of squarespace's "responsive design"? It looks messy to me. I just want the picture to stay the same, not zoom as you scroll down.

Thank you! 

See the video. I think it will be help you. If not then let me know. And one question. Did you add any type of custom code on your website?

18 hours ago, Web_Solutions said:

See the video. I think it will be help you. If not then let me know. And one question. Did you add any type of custom code on your website?

Hi Web_Solutions, thank you for your help! Unfortunately both of these settings are off on my site, so it is not an animation setting causing the issue. I do have custom CSS but nothing geared toward animation, and the issue was happening before I used CSS to resize the padding on a few things.

Upon further inspection it does seem to be due to the header being in a "fixed position" as it happens on every page. When I turn off the "fixed position" setting it stops happening, but then of course the header also goes away as you go down the page instead of staying at the top. Let me try this CSS. Thanks for your assistance!

6 minutes ago, Web_Solutions said:

Add these code on Custom CSS

.header .header-announcement-bar-wrapper{
  padding-top: 3vw !important;
  padding-bottom: 3vw !important;
}

 

Yes that fixed it! Yay! I think my issue was I was trying to manipulate the padding on the image rather than the header bar (and that I am just not good at CSS haha!) This forum is really such an amazing resource, thank you so much!

Thanks 

Thank you!