Custom Form Module

[SWhitworthP3]

Hi everyone

I'm trying to centre a from on a HTML & HubL page. I was using the default form.module but could not get this to appear centred on mobile & desktop.

So, I cloned the default module and added some custom CSS: 

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

This successfully centres the form BUT it loses all the styling and I also don't have the option to style the form in in the Hubspot page editor itself anymore.

My HTML / CSS knowledge is pretty entry level so if there's a straightforward solution then I am here for it! Thank you 

[Jaycee_Lewis]

Hey, @SWhitworthP3 👋 Beginner questions and learning new things are 100% welcome here! 

Have you tried wrapping your form in a div? Like this?

<div class="form-container">
    <!-- Your HubSpot Form -->
</div>

Then styling the .form-container class to get it centered?

.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

If it's still now working as expected, try viewing your page using the Chrome Developer tools to look for conflicting CSS that might be overriding what you've tried. On a personal note, I love CS, but it's often so frustrating. 

Best,

Jaycee