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

SOLVE
KRosenholm
New Member

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

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Kevin-C
Solution
Top Advisor | Partner

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

View solution in original post

4 Replies 4
Kevin-C
Top Advisor | Partner

Hey @KRosenholm

 

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

Reply
0 Upvotes
frederikgabriel
New Contributor

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 🙏

Reply
0 Upvotes
Kevin-C
Top Advisor | Partner

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?
Reply
0 Upvotes
Kevin-C
Solution
Top Advisor | Partner

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

View solution in original post