Form Field Width and Alignment

SOLVE
Occasional Contributor

I am working on editing a Landing page template (https://app.hubspot.com/marketplace/212484/products/airfleet/airfleet-product-page) and am struggling with the form field widths at the bottom of the page. The form is sticking to the left side of the container and no matter where I put "max-width: 100%;" or "width: 100%;" the form stays exactly where it is. I can't even center it by justifying or aligning it. Ideally, I would like the form to justify left, but fit to the width of the container.

To be completely honest - I am not a css developer and am more of a css troubleshooter, but I have had developers look at the css and they're scratching their heads as well. Their assumption is that it has something to do with "fluidity." The form css code after some customization for colors/branding looks like this:

.af-product-form{
width: 100%;
padding: {{ sectionPadding }} 0;
text-align: left;
background-color: {{ templateLightBlue }};
color: {{ F4F9FB }};
}

.af-product-form .container .form-container .hs-form-field fieldset{
text-align: center;
width: auto;
max-width: 100% !important;
}
}

.af-product-form .container .form-container .hs-form-field> label {
color: {{headerColor}};
font-weight: bold;
font-size: 1.25rem;
}

.af-product-form .form-container .hs-form input[type="password"],
.af-product-form .form-container .hs-form input[type="text"],
.af-product-form .form-container .hs-form input[type="datetime"],
.af-product-form .form-container .hs-form input[type="datetime-local"],
.af-product-form .form-container .hs-form input[type="date"],
.af-product-form .form-container .hs-form input[type="month"],
.af-product-form .form-container .hs-form input[type="time"],
.af-product-form .form-container .hs-form input[type="week"],
.af-product-form .form-container .hs-form input[type="number"],
.af-product-form .form-container .hs-form input[type="email"],
.af-product-form .form-container .hs-form input[type="url"],
.af-product-form .form-container .hs-form input[type="search"],
.af-product-form .form-container .hs-form input[type="tel"],
.af-product-form .form-container .hs-form input[type="color"],
.af-product-form .form-container .hs-form input[type="file"],
.af-product-form .form-container .hs-form textarea{
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid {{ headerColor }};
border-radius: 2px;
color: {{ headerColor }};
font-family: {{ secondaryFontFamily }};
font-weight: bold;
font-size: 1rem;
outline: none !important;
padding: 10px 15px;
margin-bottom: 15px;
}
.af-product-form .form-container .hs-form .hs-error-msgs{
list-style: none;
color: {{ F5F5F5 }};
font-size: .825rem;
margin: 0px 0 0 0;
padding: 0;
text-align: left;
}

.af-product-form .form-container .hs_submit{
text-align: center;
}

.af-product-form .form-container .hs-button.primary,
.af-product-form .form-container input[type="submit"],
.af-product-form .form-container input[type="button"] {
text-decoration: none;
text-transform: uppercase;
background-color: {{ templateBlue }};
color: {{ whitecolor }};
padding: 20px 35px;
border-radius: 2px;
font-weight: bold;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
cursor: pointer;
outline: none !impotrant;
border: none;
font-family: {{ baseFontFamily }};
font-size: 1.125rem;
margin-top: 20px;
width: 25%
}

 

 

heres what it looks like currently:

Screen Shot 2019-10-15 at 10.56.24 AM.png



CSS
1 Accepted solution

Accepted Solutions
Top Advisor | Gold Partner

Something like: 

form.hs-form fieldset, form.hs-form fieldset.form-columns-1 .hs-input {
    max-width: 100%;
    width: 100%;
}

Would give you this result. Is that what you're looking for?

form.png

6 Replies 6
Top Advisor | Gold Partner

can you give us a link to the preview of the page you are working on?

Reply
0 Upvotes
Occasional Contributor
Reply
0 Upvotes
Top Advisor | Gold Partner

Something like: 

form.hs-form fieldset, form.hs-form fieldset.form-columns-1 .hs-input {
    max-width: 100%;
    width: 100%;
}

Would give you this result. Is that what you're looking for?

form.png

Occasional Contributor

That's exactly what I'm looking for! However, I plugged in the code you provided and it doesn't change the way the form displays. Is there a specific place I should input that?

Reply
0 Upvotes
Highlighted
Top Advisor | Gold Partner

It worked!, I can see it over here. You might be cached.

This extension has a cache buster that will help you clear cache when making changes.

https://chrome.google.com/webstore/detail/hubspot-developer-extensi/gebemkdecnlgbcanplbgdpcffpdnfdfo...

 


If this answer helped, please, mark as solved Smiley Very Happy


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

Reply
0 Upvotes
Occasional Contributor

Thanks so much!! Clearing my cache worked