Form Field Width and Alignment

Developer Support CMS Development
1

I am working on editing a Landing page template (HubSpot Marketplace) 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
Screen Shot 2019-10-15 at 10.56.24 AM.png1041×614 59.1 KB

2

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

3

https://solutions.excella.com/coachingtoaugmenttraining

4

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
form.png2870×2356 373 KB

5

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?

6

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.

If this answer helped, please, mark as solved :grinning_face_with_smiling_eyes:

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

Drop by and say Hi to me on slack.

7

Thanks so much!! Clearing my cache worked