Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Widget Button Formatting Issues: Text Wrap & Alignment


Posted (edited)

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>


Screen Shot 2020-03-29 at 12.10.19 PM.png

Screen Shot 2020-03-29 at 12.10.09 PM.png

Edited by bluebrindlemarketing

Share this post

Link to post

3 answers to this question

Recommended Posts

  • 0

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

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...