Hi guys!

I having trouble with my news letter block section. I am trying to change the color of the words join the tribe (sign up) button to where they can be seen when you hover or click on the button. It seems to be working on the desktop and mobile version on my computer, but every time I check it on my phone the words look completely blank and can be seen. It just shows up as a white box/button. 

I would also like to the change the email button to have a very light rectangle with slightly rounded corners. I like the size of the font and spacing for now but I would like the line not to be so big or wide if possible. 

I have used so many different css, I feel like anything I add doesn't work now. 

Here is everything I have added and used so far. I am happy to consolidate. Please help!

Thank you so much.

/* text - input button */
.newsletter-form-header-description p {
    margin-bottom: 0 !important;
}
.newsletter-block .newsletter-form-body>div {
    margin-top: 7px;
    padding-top: 8px;
    padding-bottom: 0px;
}
/* privacy - input button */
.newsletter-form-footnote p {
    margin-top: 0px !important;
}
/* Email input color */
.newsletter-form-body input, .newsletter-form-body input::placeholder {
    color: white !important;
}
.newsletter-block .newsletter-form-header-title {
 font-size: 10px
}
.newsletter-block .newsletter-form-wrapper {
 padding: 0px 10px;
}
.newsletter-block input {
 height: 3.em;
 max-width: 20em;
 display: block;
}
footer.sections input[type="text"] {
    border-color: white;
}
footer.sections input[type="text"]::placeholder {
    color: white !important;
}
.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
button.newsletter-form-button.sqs-system-button {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
// Full Underline Newsletter Form - Block Style // 

.newsletter-block .newsletter-form-body {
  padding: 0px !important;
  border-bottom: 1px solid !important;
}

// Full Underline Newsletter Form - Field Style // 

.newsletter-form-field-element {
  border: none !important;
  background-color: transparent !important;
}

// Full Underline Newsletter Form - Input Style // 

.newsletter-form .newsletter-form-field-element, .field.email input::placeholder, .field.email input:focus {
  color: #ffff !important;
}

Can you add the link to the site?

I am sorry, I thought I added it already. Here you go, thank you so much!

https://www.thebellesophie.com

Would you like the mobile version to look like in the attached image?

 

@media (max-width: 767px) {
    .newsletter-form-body .email input {
        text-align : center;
    }
    
    .primary-button-style-outline .fluid-engine .newsletter-form .newsletter-form-body .newsletter-form-button {
        background : #fff!important;
    }
    
    .newsletter-form-button span {
        color : #000!important;
    }
}

Yes, but I think I would prefer that the email button just have the underline and and the join the club look like the image you've attached!

It's not possible to have them both on the same line in the mobile version right?

If anyone knows how to fix it, I'd be so grateful! thank you.

I will try to add the code this week or the next one if no other answer appears.

Super busy atm

Thank you so much! I appreciate you!