Widget Button Formatting Issues: Text Wrap & Alignment

Site URL: http://samekindofdifferentasmefoundation.org/donate-1

I'm having trouble with integrating a widget from a third-party app. 
The integration allows for users to click on a button and then opens a dialogue box to make a purchase or donation. 

Here is what I'm trying to achieve

1. A large button the spans 75%-100% of the container
2. The button responding to screen size and text wrap when appropriate
3. Button staying centered
4. Text staying vertically centered in the button

The code I have from the third party website is...

<div style="background:#ffffff; border-radius:0px 0px 0px 0px;font-weight:bold; font-family:Tahoma, Geneva, sans-serif;border:3px solid #ff5722;box-shadow:none;left: 50%; margin-left: -500px;display: block;clear: both; width:1000px; height:70px; line-height:2.9; position:relative; cursor:pointer;font-size:24px; text-align:center;color:#ff5722;text-decoration: none; z-index:1;" onclick="open_window('Nzg4ODA=','www.flipcause.com')">DONATE $30 GET AN AUTOGRAPHED COPY OF WORKIN’ OUR WAY HOME</div>

Hi @bluebrindlemarketing! I'm happy to help. Here is new code you can use instead which will more similarly match your site's existing branding but retain the more actionable coloring of the new button's color.

<div style="background:#ffffff;border-radius:0px 0px 0px 0px;font-family: futura-pt;letter-spacing: .1em;font-size: 15px;font-weight: 600;border:3px solid #ff5722;box-shadow:none;display: block;clear: both;line-height: 1;position:relative;cursor:pointer;text-align:center;color:#ff5722;padding: 21px 34px;text-decoration: none;z-index:1;" onclick="open_window('Nzg4ODA=','www.flipcause.com')">DONATE $30 GET AN AUTOGRAPHED COPY OF WORKIN’ OUR WAY HOME</div>

It's also worth mentioning that simply changing this one line of code doesn't give you all the flexibility you were looking for. The button exists in a container limiting how wide the button can grow. The no-exit modal (pop-up) as well as the modal triggered by this button also bleed off the page and do not respond/resize well on mobile. I'd be happy to work through these with you if you're free. Feel free to message me directly and we can set up a screen sharing call and resolve these issues.

Best regards,
Brandon McConnell

Brandon - - this worked beautifully. Really appreciate the help!

Great, glad I could help!

Hi @brandonmcconnell

I'm having issues with button alignment on the home page under the section "How I Can Help You." I'd love for the buttons to be aligned even though the text is not the same length. I'm currently using spaces but when it's on mobile, it looks off as well. I was wondering if you could help me out with this? Really appreciate it - thanks!

website: www.energcoach.com

pw: energ