Form Field Width and Alignment

SOLVE
sgilhuley
Participant

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
tjoyce
Solution
Recognized Expert | Platinum 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

View solution in original post

6 Replies 6
tjoyce
Recognized Expert | Platinum Partner

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

0 Upvotes
sgilhuley
Participant
0 Upvotes
tjoyce
Solution
Recognized Expert | Platinum 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

View solution in original post

sgilhuley
Participant

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?

0 Upvotes
tjoyce
Recognized Expert | Platinum 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 😄


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

 

Drop by and say Hi to me on slack.

0 Upvotes
sgilhuley
Participant

Thanks so much!! Clearing my cache worked