Customise size and colour of form fields on Newsletter block

Site URL: http://www.wiseheartproject.co

Hi there, 

Thanks so much for any help in advance! 

I'm trying to update the design of the newsletter block to look like this attached image-

However, having no such look. I have tried this following code to change the form fields but it isn't working.

.newsletter-block .newsletter-form-field-element:focus, .search-block input:focus {
    outline-color: #35582A !important;
}

.newsletter-block .newsletter-form-field-element:focus, .search-block input:focus {
    outline: none !important;
    border: 1px solid #35582A !important;
}

It currently looks like this-

I would also like to reduce the size of the form fields and change the font to Neue Haas Grotesk Display Pro 24px which is a different size to any of the custom fonts I currently have on the site. 

Any help is much appreciated. 

Cheers, 

Heather 

Try this Custom CSS as a start:

.newsletter-block .newsletter-form-field-element {
  background: none !important;
}
.sqs-block-newsletter .newsletter-form-field-element {
  border: 1px solid rgba(53, 88, 42, 1);
}
.newsletter-block .newsletter-form-field-wrapper {
  min-width: 100%;
}

That's worked great, thanks so much Ziggy! 

Is it possible to make the height of the boxes smaller at all? 

One more thing: I'm trying to make the size of the text for the Name and Email address smaller is that possible, I've been trying to do this with custom code but struggling, and not able to change it in the site styles either. 

Thanks in advance! 

Try this:

.newsletter-form .newsletter-form-field-element {
   font-size: 1rem !important;
}
.newsletter-block .newsletter-form-field-element, .newsletter-block .newsletter-form-button {
  padding: 1rem 1.2rem !important;
  line-height: 1.2rem !important;
}

Amazing, that's worked! Thank you! 

The final thing, can we aligned all of the boxes to be the same length? The email address is currently longer. 

Add this to Custom CSS:

.newsletter-block .newsletter-form-fields-wrapper {
    max-width: 360px;
}