ConspiracyTheory13 Posted February 6 Share Posted February 6 Brief Description of the Problem: Both the Calendly Incline Embed and the Popup Text have way too much padding around them and seemingly no way to edit them. Check the attached photos to see what I mean. Incline Embed Example Pop Up Text Example So base code I'm working with are these two samples: Pop Up Text Calendly Link <!-- Calendly link widget begin --> <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"> <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script> <a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/excellentreceiver88/30min'});return false;">Get Started Now</a> <!-- Calendly link widget end --> Incline Embed Calendly Widget <!-- Calendly inline widget begin --> <div class="calendly-inline-widget" data-url="https://calendly.com/excellentreceiver88/30min" style="min-width:320px;height:700px;"></div> <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script> <!-- Calendly inline widget end --> I would prefer to get the Incline Embed working but at this point I would take either. Current Code I'm Working On <head> <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"> <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script> <style> .calendly-link { font-size: 18px; color: purple; /* Change the text color to purple */ font-weight: bold; /* Make the text bold */ text-decoration: none; /* Remove underlines */ padding: 0; /* Remove any padding */ margin: 0; /* Remove any margin */ line-height: 1.2; /* Add more styles as needed */ } </style> </head> <body> <a href="" class="calendly-link" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/excellentreceiver88/30min'});return false;">Get Started Now</a> </body> Other Trouble Shooting I've Tried 1. Editing the height of the element. This does not effect the padding. 2. Editing the sites over all CSS, this does not help 3. Placing the code in a seperate section from the text, this does not help. 4. Modifying the HTML with styles as shown above- does not seem to help. Does anyone have any ideas about what the problem may be? I do have the floating pop up widget working fine on the website, removing it doesn't seem to effect anything. I also searched the forum first and found an old thread of people complaining about this issue back in April 2023, so is this just an ongoing issue that is unresolvable? Link to comment
tuanphan Posted February 11 Share Posted February 11 Hi, Can you share link to page? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
TBow Posted February 13 Share Posted February 13 Hi, does this have an update? I'm having the same problem. The Calendly embed is requiring a scrollbar no matter how much room I give it in the editor. Thanks for your help! Link to comment
melody495 Posted February 13 Share Posted February 13 1 hour ago, TBow said: Hi, does this have an update? I'm having the same problem. The Calendly embed is requiring a scrollbar no matter how much room I give it in the editor. Can't tell what's wrong without seeing your website. But using the above as an example, you need to change the height value if it's not tall enough for you. e.g. height: 100%. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Website Developer e: melody@melodylee.tech 💻 Can't figure something out and want to learn? 💁♀️ 1-2-1 Squarespace session 👩💻 Need some customisation for a design? 💁♀️ Custom Code help ☕ Did I help? 💁♀️ I like coffee (Thank you) 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