Unknown code break on Index Page 7.0. Brine - Going crazy

Site URL: https://thecreativeinka.com/branding-2

After hours of searching for an answer, I haven't found it. Hope you all can help!

I've been using plenty of Custom CSS code snippets on my site revamp on my Brine template 7.0, and on this one specific page, I have no clue where I possibly broke the code. I have a feeling it's in the #cta-button custom code, but I have no clue what part of it - it LOOKS right to me. 

The first attached image is where the problem lies I think. This whole index-page is supposed to be dark green background with light mint green text, and mint button centered.

Second image is another test page showing how this section is supposed to look. 

The URL for the broken index-page is below and. the background is also not supposed to be fixed in the back of ALL sections - it's supposed to only be the parallax banner image for the top index-page section. 

https://thecreativeinka.com/branding-2

What the above URL is supposed to resemble: https://thecreativeinka.com/website-design-2

Bit more info on the #CTA-Button code. - it contains a code block with <div> code to create the button, styling in Custom CSS, and a javascript code in footer injection. Again, it's my assumption this is where the problem lies,  but I'm not sure. Halp.

Thanks!!

#cta-button is exactly your issue. The selector conflicts with selectors SS uses. I suggest you change the name to something like #my-cta-button.

Let us know now it goes.

On 6/24/2021 at 6:52 PM, creedon said:

#cta-button is exactly your issue. The selector conflicts with selectors SS uses. I suggest you change the name to something like #my-cta-button.

Let us know now it goes.

Thanks, @creedon. I changed it to #my-cta-button, as you suggested, and unfortunately, it did not fix the issue of random "button" appearances throughout the index page section and it also did not fix the issue of the main header index section parallax background repeating across all index page sections...

Issue #1:

Issue #2 (background image for 1st section, static and repeats across all sections for this index)

For reference, this is what this index page is SUPPOSED to look like: https://thecreativeinka.com/website-design-2 - I just have no clue where the coding went wrong - they both should have fairly identical code, just copywriting differences.

Edit: I previously stated that the cta button code included a code injection in footer - it doesn't, I mixed up my codes. CTA button code is only code block + custom css. Again, it is only my assumption that that is the problem, but I could be wrong. 

Please post the content of the code blocks for your custom buttons.

Upon further investigation I'm seeing bits of button code in odd places in the page which indicates that there may be a syntax error in the code.

5 hours ago, creedon said:

Please post the content of the code blocks for your custom buttons.

Upon further investigation I'm seeing bits of button code in odd places in the page which indicates that there may be a syntax error in the code.

Here is the Code Block code (it is the same on both pages that have it - looks correct in one page, but not the one in question):

<div class="sqs-block-button-container--center" id="my-cta-button-container">
<a href="/contact" class="sqs-block-button-element--large sqs-block-button-element" id="my-cta-button">WORK WITH US
</div>

Then here is the Custom CSS for the button, it applies to both pages that have this button, but looks wrong in the page in question, and correct in the other:

//Custom CTA button//
#my-cta-button-container {
text-align: center !important;
}

#my-cta-button {
text-align: center !important;
background-color: #D1E4D1;
border-radius: 300px;
position: relative;
-webkit-transition: .1s background-color linear;
-moz-transition: .1s background-color linear;
-o-transition: .1s background-color linear;
transition: .1s background-color linear;
padding: 18px 30px;
color: #394D3A;
border-color: #d34b27;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 550;
font-style: normal;
width: 100px;
}

#my-cta-button:hover {
background-color: #BFC08B;
border-radius: 300px;
position: relative;
-webkit-transition: .1s background-color linear;
-moz-transition: .1s background-color linear;
-o-transition: .1s background-color linear;
transition: .1s background-color linear;
color: ##394D3A;
}

The a tag line is unclosed. It should look like the following.

<a href="/contact" class="sqs-block-button-element--large sqs-block-button-element" id="my-cta-button">WORK WITH US</a>

That may explain the odd placement of the tag in strange places.

Let us know how it goes.

12 hours ago, creedon said:

The a tag line is unclosed. It should look like the following.

<a href="/contact" class="sqs-block-button-element--large sqs-block-button-element" id="my-cta-button">WORK WITH US</a>

That may explain the odd placement of the tag in strange places.

Let us know how it goes.

YOU ARE A LIFESAVER!!! How insane that one tiny detail can throw off so many things. Thank you, that fixed the whole issue.