bluebrindlemarketing Posted March 29, 2020 Share Posted March 29, 2020 (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 A large button the spans 75%-100% of the container The button responding to screen size and text wrap when appropriate Button staying centered 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> Edited March 29, 2020 by bluebrindlemarketing Link to comment
Solution brandonmcconnell Posted March 29, 2020 Solution Share Posted March 29, 2020 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 bluebrindlemarketing 1 Link to comment
bluebrindlemarketing Posted March 29, 2020 Author Share Posted March 29, 2020 Brandon - - this worked beautifully. Really appreciate the help! Link to comment
brandonmcconnell Posted March 30, 2020 Share Posted March 30, 2020 Great, glad I could help! Link to comment
ener-g Posted June 9, 2020 Share Posted June 9, 2020 (edited) 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 June 9, 2020 by ener-g Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment