Box spacing 7.1

What is access password?

password: trythis

Add to Home > Design > Custom CSS

.newsletter-block .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.newsletter-form-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

Great thanks! However, it doesn't change the sign up button too.

Hi again - how do I alter the "sign up" box to match?

Hi, any luck with this? I guess it's just a repeat of this code only I don't know what the sign up button is called?...

.newsletter-form-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

incorrect password

password: trythis

button.newsletter-form-button.sqs-system-button.sqs-editable-button-layout.sqs-editable-button-style.sqs-editable-button-shape {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

Great thanks. Although for some reason the 2 boxes aren't aligned...

4 minutes ago, mportch said:

Great thanks. Although for some reason the 2 boxes aren't aligned...

It seems same?

Sign up box sits slightly lower...

play with padding top & bottom ✌️

button.newsletter-form-button.sqs-system-button.sqs-editable-button-layout.sqs-editable-button-style.sqs-editable-button-shape {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

Yep I've have. It just makes the space around sign up bigger or smaller but won't align. Very strange.

Anyway, I have another idea I'd like to run past you though. How could I make it look like this instead? ... 

.newsletter-block .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-top: none;
    border-right: none;
border-left: none;
}

Thanks. Do you know how to adjust both line and box line thickness?

And change the "Email address" to just "EMAIL" in caps so it looks like "SUBMIT"?

border-width: 5px;

change email. Needs script code. Which plan do you use? Personal or Business.

Just in trial mode right now. Will be business when start plan.

Add this to Home > Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("div#block-ef4da39d6f1dbbdd528a input").attr('placholder','EMAIL');
});
</script>

Ideally I want it to look exactly like this...

Align the "EMAIL" to the left of the line. Make the line black. Then change the line thickness of the subscribe button.

.newsletter-block .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 0 !important;
    border-top: none;
    border-right: none;
    border-left: none;
    border-width: 2px;
    border-color: black;
}

and script code above

Thanks! It's close - "Email address" hasn't changed to "EMAIL"?

And how would I change the line thickness of the Subscribe button?

1. For some reason it's looking weird in mobile view on my actual mobile phone - it's showing the box as curved and showing the top corner curves. I'd like to remove the top corners and make the line straight?

2. And I'd like to change "Email Address" to caps "EMAIL" with the same letter spacing as "SUBSCRIBE"?...

Hi,

Any luck on solving the above with mobile view?

Thanks.

Q1. Seems fine here. Do you use iPhone/Safari?

Q2.

.newsletter-block .newsletter-form-field-element {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 0 !important;
    border-top: none;
    border-right: none;
    border-left: none;
    border-width: 1px;
    border-color: #000;
    text-transform: uppercase;
}