bluebrindlemarketing Posted March 29, 2020 Share Posted March 29, 2020 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> Link to comment
brandonmcconnell Posted March 29, 2020 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 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 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 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.