Jump to content

Widget Button Formatting Issues: Text Wrap & Alignment

Go to solution Solved by brandonmcconnell,

Recommended Posts

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
Link to comment
  • Solution

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

Link to comment
  • 2 months later...

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

 

Edited by ener-g
Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.