Merging Text Center html

[DFenton]

Hi everyone,

I’m very new to html and I’m trying to add a hubspot form and title to our site but its too far to the right where it looks cut off when i publish it. I would like to shift everything over to the center or a little more over to the right so it’s not so close to the edge. What should I add to the code? I tried to center the text by doing the text-align: center but it isn’t working. What am I doing wrong?

Here is what I have so far and I have a screenshot of how it’s showing up in the preview:

<b style=“font-size:160%;color:DodgerBlue;”>Newsletter Sign Up <b>
<br>
<br>
</b></b><script charset=“utf-8” type=“text/javascript” src=“//js.hsforms.net/forms/embed/v2.js”></script>
<script>
hbspt.forms.create({
region: “na1”,
portalId: “8952488”,
formId: “5b75e44b-efd1-4bee-af36-c435f0ef8098”
});
</script>
<br>
<br>

[RSkane]

Try adding center tags around the script.

<b style="font-size:160%;color:DodgerBlue;">Newsletter Sign Up <b>
<br>
<br>
</b></b><center><script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "8952488",
formId: "5b75e44b-efd1-4bee-af36-c435f0ef8098"
});
</script></center>
<br>
<br>

[DFenton]

Hi thanks for the response. It just made all the text below the form centered. See below:

[RSkane]

You can center it via CSS. Go into your template files and find the css file. It might be style.css or child.css. And add this styling (adjust the width to your liking):

/* To center the form within its module and applying a max-width */
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* To center the form title within a form module */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* To center the form submit button */
.hs_submit {
 text-align: center;
}

This will center-align all forms though. If you only want to center this form, give it a class. See for ref: https://community.hubspot.com/t5/Lead-Capture-Tools/Center-a-form-on-a-HubSpot-template/m-p/420007

[DFenton]

Hello again,

A reminder that I am very new to this and may need some more guidance. We don’t have a css file on the names you mentioned, but I tried it under a few css files we have and I don’t see a difference. Am I doing something wrong? See the photos I provided.

How it is showing up on the website:

Code I put into css file:

form.hs-form,
.hs_cos_wrapper .newsletter-sign-up {
max-width: 600px;
display: block;
margin: 0 auto;
}

.hs_cos_wrapper .newsletter-sign-up {
text-align: center;
}

.hs_submit {
text-align: center;
}