Changing positioning of newsletter field error

I have done some custom code on the newsletter email box to surround the submit button with the same border as the field itself using absolute positioning. My issue is that if you click the "Book a Demo" button without entering an email, the error message offsets (moves down) the form email field, but doesn't offset the button. As a result I get strange spacing as shown in the screenshot below.

Any JS ideas on how to stop the error message from offsetting the field? Because the button has an absolute position and the field does not, I assume that is how it would have to be done, I just don't know which code to invoke to do it.

Thanks!

Hi. Can you share link to your site? We can check problem easier

Hey @tuanphan! Having this problem on https://mandarin-vanilla-ss4s.squarespace.com as well, password is "brick" - any help would be appreciated!

On 11/9/2022 at 3:07 PM, PatrickJ said:

Hey @tuanphan! Having this problem on https://mandarin-vanilla-ss4s.squarespace.com as well, password is "brick" - any help would be appreciated!

Try adding to Design > Custom CSS

/* newsletter error */
@media screen and (min-width:992px) {
.newsletter-block .newsletter-form-field-wrapper .field-error {
    position: absolute;
    bottom: 40px;
}
.newsletter-form-footnote {
    padding-top: 40px;
}}

13 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* newsletter error */
@media screen and (min-width:992px) {
.newsletter-block .newsletter-form-field-wrapper .field-error {
    position: absolute;
    bottom: 40px;
}
.newsletter-form-footnote {
    padding-top: 40px;
}}

Thanks @tuanphan! That works, but is there any way to maintain the expanding box functionality while having it placed underneath? Cheers!

On 11/13/2022 at 6:25 AM, PatrickJ said:

Thanks @tuanphan! That works, but is there any way to maintain the expanding box functionality while having it placed underneath? Cheers!

What do you mean? Can you explain in more detail?