shellieboo

Sure,
For the animated gradient, at the beginning of the code, change ".css-selector" to  ".section-background" See the first four lines of the original code below for where it appears (and of course change the collection to your block id).
 
#collection-60ea7161025aa46e30e0a38a {     .css-selector { background: linear-gradient(270deg, #cfadea, #9b51d5, #7b658c);     background-size: 600% 600%;

I figured it out 😀  if anyone needs help let me know!

Site URL: https://lime-wolverine-672z.squarespace.com/
Hello!
I am trying to figure out how to create an animated background on my (trial) site. I tried the most referenced option -
https://www.gradient-animator.com/
and set the id to my collection background:
#collection-60ea7161025aa46e30e0a38a {     .css-selector { background: linear-gradient(270deg, #cfadea, #9b51d5, #7b658c);     background-size: 600% 600%;        -webkit-animation: AnimationName 30s ease infinite;     -moz-animation: AnimationName 30s ease infinite;     animation: AnimationName 30s ease infinite; } @-webkit-keyframes AnimationName {     0%{background-position:0% 50%}     50%{background-position:100% 50%}     100%{background-position:0% 50%} } @-moz-keyframes AnimationName {     0%{background-position:0% 50%}     50%{background-position:100% 50%}     100%{background-position:0% 50%} } @keyframes AnimationName {     0%{background-position:0% 50%}     50%{background-position:100% 50%}     100%{background-position:0% 50%} }   }   
I've also tried this code to no avail and set it to each section background (this is currently up):
section[data-section-id="60ea7162025aa46e30e0a4bd"] .section-background {     background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;     background-size: 400% !important;     text-fill-color: transparent;     -webkit-text-fill-color: transparent;     -webkit-animation: Gradient 10s ease infinite !important;     -moz-animation: Gradient 10s ease infinite !important;     animation: Gradient 10s ease infinite !important; } section[data-section-id="60ea7162025aa46e30e0a4bb"] .section-background {     background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;     background-size: 400% !important;     text-fill-color: transparent;     -webkit-text-fill-color: transparent;     -webkit-animation: Gradient 10s ease infinite !important;     -moz-animation: Gradient 10s ease infinite !important;     animation: Gradient 10s ease infinite !important; } section[data-section-id="60ea715052638457540dc335"] .section-background {     background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;     background-size: 400% !important;     text-fill-color: transparent;     -webkit-text-fill-color: transparent;     -webkit-animation: Gradient 10s ease infinite !important;     -moz-animation: Gradient 10s ease infinite !important;     animation: Gradient 10s ease infinite !important; }  
Am I missing a code block or class id? Do I need to have a business plan for the animations to work? Or are my eyes deceiving me?
 
Here is my site: https://lime-wolverine-672z.squarespace.com/ and login is pine212apple
 
 
Thank you for your help!

Q3. + 4. I see a blank section. If you remove it, I think space will be disappear.
Q5. Add to Design > Custom CSS
/* tablet homepage content width */ @media screen and (max-width:991px) and (min-width:768px) { body.homepage .content { width: 75% !important; } }  

Q1. 2. Add to Design > Custom CSS
/* tablet */ @media screen and (max-width:991px) and (min-width:768px) { /* about us center image */ [data-section-id="60f5aaa54d59292d6ddfe62e"] .content-wrapper { justify-content: center !important; } } /* reduce space above footer */ @media screen and (max-width:991px) { [data-section-id="60f49031670cec307f70c93f"] { min-height: unset !important; height: 10px; } }  

Worked perfectly! Thanks @bangank36 !

try
.header-nav-item a[href*="/order-online"] { border: 2px solid white; padding: 10px 30px; border-radius: 100px; box-sizing: border-box; } .header-nav-list { align-items: center; }

Add to Home > Design > Custom CSS
.portfolio-hover-bg-overlay { background: transparent !important; }  

Site URL: https://moose-sepia-m3gk.squarespace.com/
hello all,
I am trying to change the "Order Online" to have an outline button for the link. I believe I did this before by starting with a template where the button was outlined, but on this particular site, none of the code I am trying is working. Here is the website: https://moose-sepia-m3gk.squarespace.com/ 
and pw: lipscafe-ss
 
Here is the last code I tried:
 
//button cta a.Header-nav-item:last-of-type { border: 2px solid white; padding: 10px 30px; border-radius: 100px; }  
Any help is much appreciated!
Thank you,