Jump to content

How to align embedded script button from typeform?

Go to solution Solved by WN1,

Recommended Posts

Hi,

I'm trying to figure out how to align the button created by Typeform.com via a code snippet.

Below, you can see the button is not centered in the box

image.png.99802cb37dacf3cf68a731601d9d8256.png

 

The code for the button:

<button data-tf-popup="KRPz9cGu" data-tf-iframe-props="title=Registration Form" data-tf-medium="snippet" style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#6C596E;color:#FFFFFF;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Apply now</button><script src="//embed.typeform.com/next/embed.js"></script>

I've tried using custom CCS in the design tab such as:

.button-class {
  display: block;
  margin: 0 auto;
}

And 

.typeform-share-button {
  display: flex;
  justify-content: center;
}

But I've had no luck.

 

Any ideas?

 

Many thanks,

Will

Link to comment
  • Replies 5
  • Views 418
  • Created
  • Last Reply

Top Posters In This Topic

On 3/15/2023 at 10:12 PM, WN1 said:

Hi,

Apologies, the website is

https://www.daltonlatymer.com/

Password: SSforumtest

The button appears on:

https://www.daltonlatymer.com/start-your-search

https://www.daltonlatymer.com/candidates

Hope this helps.

Hi,

It looks like you figured it out?

image.png.92e1c1b3f9f52cd9d78bc58dee10e9e5.png

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

Hi tuanphan,

Admittingly I've done the best I can, but if you test the website in different resolutions (and especially on mobile devices) the button placement is all over the place.

I have found a temporary workaround though:

It appears the box assigned to the code snippet is fixed at a minimum size, so if you add invisible spaces to the name of the box, one can brute force the button to match the size of the predetermined button size:

 

Quote

image.png.dd929f6b85d432f979cc1497f642d2d2.png

On the image above, looking at the code, I've added invisible spaces (using alt+255, NB: normal spaces will not work), and you can see, with the red arrow, the text has been indented.

Thus if you add more spaces at the end one can create a button that fits the box.

Quote

image.png.b2692ce697928db3710faac48b5cf7a9.png

 

Ideally I would like to know the real solution to this problem as on mobile this creates more problems

 

Quote

image.png.1751149315897d9c39b09041044ca482.png

 

But nevertheless, its a small improvement

 

Link to comment
  • Solution

Ok so a little more context. Since SquareSpace changed their pricing plans for code blocks in Dec 2022 (after I had this issue) the solution is to upgrade to a business plan over a starter plan. 

So if anyone has this niche problem, the solution. Pay more. 🙃

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.