Inserting wave CSS code in Settings vs Advanced Header code injection

Site URL: http://www.qualitycupofcoffee.com/new-index-1

Hey Hey Squarespace Community 👋

I hope you had a great week-end. I am currently editing my website and fixing some awful bugs*.
On my website I use "Wave dividers". The issue is as I am evolving and learning about coding, I am founding new techniques to create these waves. Currently, all my "waves" are just uploaded background images which is not working well across different devices.

>> I finally found a good technique to get it done, however, I would like to inject that CSS code in my "advanced header code injection on the page I would like to customize". 

This code works perfectly when in my Custom CSS area :

/*test pink wave*/
#new-page-4 {
  background: #f0c4b2;
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5a5e3c50a9db09fc9c1233de/t/5fc4c62a3c02f22b9da32e1a/1606731306701/1stwavepinkabout.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -100px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}

When I try to inject this code in my page (> advanced > header code injection) nothing appear. Here is the code I am trying to insert (I just added <script> </script>)

<script>
/*test pink wave*/
#new-page-4 {
  background: #f0c4b2;
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5a5e3c50a9db09fc9c1233de/t/5fc4c62a3c02f22b9da32e1a/1606731306701/1stwavepinkabout.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -100px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}
</script>

My question may seem stupid but why is it not possible ? Ideally I would like to upload all my custom CSS code for each page on a file that is uploaded to my website or at least injected in the advanced setting area of each page.

Best,
Manon

The <script> tags are for JavaScript.

As you are adding CSS, you need to use <style> tags instead.

For more information, see The Style Information element.

Awww actually false alert.
I did write <style> instead of script but it's not working :
 

<style>
 [data-nc-element="primary-nav"]{
   display:none;
 }
.Mobile-overlay-nav--primary { display:none; }
</style>

<style>
#partenaire-2 {
  background: #f0c4b2;
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5a5e3c50a9db09fc9c1233de/t/5fc4c62a3c02f22b9da32e1a/1606731306701/1stwavepinkabout.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -100px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}
 </style>

That's the weirdest thing.
>> You see the styling for my primary nav. is working perfectly. 
>> I even tried to remove it to only do <style> my code </style> but it does not take any action. 
Is it possible that my section id of that page is wrong ? And I should be using another code to target that page ?

>> https://www.qualitycupofcoffee.com/english

The pink wave section is not appearing under "in partnership with"

Is there a reason why you have removed the CSS from the Custom CSS area? This is the best location to manage all your CSS.

Yes, my custom area CSS is getting full : 

>> as I injected my css coding for my nav. over there, I thought I could move all my css coding to "my individual page" (if that makes sense).

>> Maybe I should leave it in the custom area then ? Could I, if I don't have enough line of code left, combine it in a "file" and upload it on my website ?

You see I have 2 versions of my website eng. / fr. which means I have to repeat the exact same codes twice  that's how I reached my coding limit. 

Hey 👋

Actually I did find a solution :
I put back the code in my custom CSS and I discovered that I can use the same code to target different pages by simply doing this :

#partenaire-2, #new-page-4 {
  background: #f0c4b2;
  overflow: visible;

  &:before {
    content: '';
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-image: url(https://static1.squarespace.com/static/5a5e3c50a9db09fc9c1233de/t/5fc4c62a3c02f22b9da32e1a/1606731306701/1stwavepinkabout.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: -100px;
    position: absolute;
    pointer-events: none;

    @media screen and (max-width: 800px) {
      background-size: 200% 50%;
    }
  }
}

Thus instead of copying my code twice or several time on my website, I can now remove several lines of code. I just target ALL the areas I want that code to be implemented 🙂

I never knew adding a "," could help me do that.

Best!