Form-centering is targeting the right border

[tette_engage]

Hi!

I tried to look for answers in previous posts, but everybody seemed to have slightly different issues regarding centering a form. I have tried using horizontal spacers, to no avail. When i use custom CSS, i get the form to center from its right border, like this:

The most recent code I tried is this:

form.hs-form,
.form-center .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: auto !important;
text-align: center;
}

I gave the form the css class of form-center, and I know the code does target the form because the text gets centered. I have tried having the form on its own, and inside a module (even tried classifying the module and targeting that one with the css). If I have mas-width: 50%, the box gets smaller and logically brings the form closer to the center. I can add padding to the left, but this becomes problematic with varying screen sizes.

Heres a link to a page with the form:

http://www.prometheusone.io/-temporary-slug-3e2277e7-f080-417a-bad5-2110d5bf799f?hs_preview=LUaZsPhC...

[tjoyce · Accepted solution]

Hello @tette_engage - 

Try: 

#hs_form_target_module_1536670727023670 {
    margin: auto;
}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[tette_engage]

Almost there! Now the form is centered, but the submit-button is slightly on the right

[tjoyce]

@tette_engage - It's technically centered, it's just that the button width is wider than your form width, giving the appearance of off center.

You should add this css to widen your form a bit: 

#hs_form_target_module_1536670727023670 form.hs-form, .form-center .hs_cos_wrapper .form-title {
    max-width: 600px;
}

[Accelerated]

Hello,

How can I center a form created on hubspot, yet when posted on my external website, the form aligns to the left.  I've read a few of the help posts and responses about CSS and spacers.  I don't believe I have access to CSS and can't locate where the spacers are.  Can someone helps.

Here's how the form looks:  https://acceleratedcourtreporting.com/pages/schedule-a-deposition

[tjoyce]

@Accelerated - you can add the following CSS to your page to fix this

<style>
#hs-form-iframe-0 {width: 500px!important;margin:auto!important;}
</style>

[tette_engage]

Ah! I see. That fixed it, perfect! Thanks 

[tjoyce]

Awesome, just checked it out, looks good.