topic Re: Form-centering is targeting the right border in CMS Development

Form-centering is targeting the right border

tette_engage — Wed, 12 Sep 2018 11:43:32 GMT

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-6165934397

Re: Form-centering is targeting the right border

tjoyce — Wed, 12 Sep 2018 11:48:22 GMT

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.

Re: Form-centering is targeting the right border

tette_engage — Wed, 12 Sep 2018 11:51:31 GMT

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

Re: Form-centering is targeting the right border

tjoyce — Wed, 12 Sep 2018 11:53:50 GMT

@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;
}

Re: Form-centering is targeting the right border

tette_engage — Wed, 12 Sep 2018 12:01:20 GMT

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

Re: Form-centering is targeting the right border

tjoyce — Wed, 12 Sep 2018 12:03:11 GMT

Awesome, just checked it out, looks good.

Re: Form-centering is targeting the right border

Accelerated — Thu, 30 Apr 2020 19:33:41 GMT

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

Re: Form-centering is targeting the right border

tjoyce — Thu, 30 Apr 2020 20:38:14 GMT

@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>