Jump to content

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

Go to solution Solved by Web_Solutions,

Recommended Posts

Posted

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! 

Posted

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?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Posted
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.

  • Solution
Posted

Add these code on Custom CSS

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

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Posted

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!

Posted
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!

 

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.