Move the newsletter button to the left

Hey guys,

I'm trying to move the "Sign up" newsletter button more to the left, as well as the "Email address" box that's next to it.

I've attached a screenshot for preview. The goal is to align both buttons/boxes with the text that's above it. 

I'd also like to move these buttons up closer to the text as well.

Thank you

-Jeff

Can you share link to this page on your site?

Yes, it's: https://jeffreysuko.squarespace.com

Password: 123

Thank you

Add to Home > Design > Custom CSS

.newsletter-form-body {
    text-align: left;
}
div#block-yui_3_17_2_1_1585622561744_6040 {
    padding-left: 0;
}

it worked. Thanks! 

One more question: Is it possible to move the boxes up closer to the text as well? 

div#block-yui_3_17_2_1_1585622561744_6040 .newsletter-form-wrapper {
    padding-top: 0;
}
div#block-yui_3_17_2_1_1585622561744_6040 {
    padding-left: 0;
    padding-top: 0;
}

Got it - thank you Tuan. It looks great on desktop but on mobile the text is now to the left instead of in the middle...just attached a screenshot

22 minutes ago, tuanphan said:

remove above code and use

@media screen and (min-width:768px) {
.newsletter-form-body {
    text-align: left;
}
div#block-yui_3_17_2_1_1585622561744_6040 .newsletter-form-wrapper {
    padding-top: 0;
}
div#block-yui_3_17_2_1_1585622561744_6040 {
    padding-left: 0;
    padding-top: 0;
}
}

 

you the man, thank you 🙏🏿

Hi

This didn't work for me - I'm on 7.1 - is that why?

Just want the "Email Address" placeholder text to align to the left.

I've tried adding :

input.field-element::placeholder {
    color: #ffffff !important;
 text-align: left;
}

but didn't work?

input.field-element::placeholder {
    color: #ffffff !important;
 text-align: left;
}

https://smilodon-hawk-zklr.squarespace.com/home (this is the footer, so any page)

password:Jessiegirl23

Just want the Email