sumcwan

@sumcwan above code for SS 7.0, try change some class to this new code
@media only screen and ( min-width: 768px ) { #page { margin-bottom: 605px; /*This may to be adjusted depending on the content of your footer*/ } footer.sections { position: fixed; height: 605px; /*This may to be adjusted depending on the content of your footer*/ width: 100%; bottom: 0; } }  

@bangank36 It works! Thank you very much!

This snippet works
[data-section-id="608a398bf571e2467b77682d"] .section-background {     background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);     background-size: 400% 400%;     animation: gradient 15s ease infinite; } @keyframes gradient {     0% {         background-position: 0% 50%;     }     50% {         background-position: 100% 50%;     }     100% {         background-position: 0% 50%;     } }  

Site URL: https://flower-springtail-8n3z.squarespace.com/
I'm trying to achieve this effect for a section on my site: https://codepen.io/P1N2O/pen/pyBNzX
I am able to identify the section then applied the gradient, I just can't figure to animate it. Can anyone tell me how to solve this?
[data-section-id="608a398bf571e2467b77682d"] .section-background { background: linear-gradient(45deg, #2242c1, #2beadb) !important; background-size: 200% 200% !important; -webkit-animation: AnimationName 5s ease infinite !important; -moz-animation: AnimationName 5s ease infinite !important; animation: AnimationName 5s ease infinite !important; } @-webkit-keyframes AnimationName { 0%{background-position:0% 51%} 50%{background-position:100% 50%} 100%{background-position:0% 51%} } @-moz-keyframes AnimationName { 0%{background-position:0% 51%} 50%{background-position:100% 50%} 100%{background-position:0% 51%} } @keyframes AnimationName { 0%{background-position:0% 51%} 50%{background-position:100% 50%} 100%{background-position:0% 51%} }