HubStrap Lite Landing Template - Remove Text in Text & Form Module and Centering Form

[KRosenholm]

Hi there,

I've created an LP in the HubSpot Template, HubStrap Lite, with a form and designed the whole page. Unfortunately, I need the form to be in the center of the page and the module included is a text and form module and won't let me or several HubSpot chat agents remove the text portion and center just the form. I think with some backend custom styling this can be made to work, but I'm hoping someone can help me with this.

Regards,

Katie

[Kevin-C]

Hey @KRosenholm

Do you have a live test page we could take a look at?

[frederikgabriel]

Hi, I'm experiencing a similar but more basic problem.

I'm using HubStrap Lite but the "default theme form" won't update to my HubSpot form.

Please advice, would help a lot 🙏

[Kevin-C]

Hey @frederikgabriel 

Could you be a little more specific? A few prompts below may help:

• How are you updating the default form?
• Are you trying to replace the form in the content the content editor?
• Are you refering to style updates or content/field updates?
• Can you provide a live example and what you're expecting to see?

[Kevin-C · Accepted solution]

Hey again @KRosenholm 

After reviewing the templates demo page we may have a solution. But this will require that you attach custom css to the page. See the CSS below:

/* Hide the text column */
.background-image .section--text-form .row-fluid.hubstrap-row .span6.hubstrap-col:nth-child(1) {
  display: none!important;
}

/* Center the form */
.background-image .section--text-form .row-fluid.hubstrap-row .span6.hubstrap-col {
  text-align: center;
}

/* Fix text alignment on form */
.background-image .section--text-form .row-fluid.hubstrap-row .span6.hubstrap-col:nth-child(2) form {
  text-align: left;
}