How to align embedded script button from typeform?

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

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

Hi,

Can you share link to page where you added it, we can check easier

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.

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?

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

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

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

Quote

But nevertheless, its a small improvement