# Form Field Width and Alignment

**URL:** <https://community.hubspot.com/t/form-field-width-and-alignment/16755>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [October 15, 2019, 3:10pm UTC](https://community.hubspot.com/t/form-field-width-and-alignment/16755 "2019-10-15T15:10:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sgilhuley](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sgilhuley/32/78471_2.png) [@sgilhuley](https://community.hubspot.com/u/sgilhuley)\
**Post date:** [October 15, 2019, 3:10pm UTC](https://community.hubspot.com/t/form-field-width-and-alignment/16755/1 "2019-10-15T15:10:49Z")

</div>

I am working on editing a Landing page template ([HubSpot Marketplace](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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/e/febed37030b8212de86aedfab4c5ff46ad5a6e4e.png)

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [October 15, 2019, 3:54pm UTC](https://community.hubspot.com/t/form-field-width-and-alignment/16755/2 "2019-10-15T15:54:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sgilhuley](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sgilhuley/32/78471_2.png) [@sgilhuley](https://community.hubspot.com/u/sgilhuley)\
**Post date:** [October 15, 2019, 3:57pm UTC](https://community.hubspot.com/t/form-field-width-and-alignment/16755/3 "2019-10-15T15:57:59Z")

</div>

[https://solutions.excella.com/coachingtoaugmenttraining](https://solutions.excella.com/coachingtoaugmenttraining)

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [October 15, 2019, 4:02pm UTC](https://community.hubspot.com/t/form-field-width-and-alignment/16755/4 "2019-10-15T16:02:35Z")

</div>

Something like:

```auto
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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/a/daadfc26a43b59ec94be550e2c28fd48a278cbca.png)

---

<div class="post-metadata">

**Author:** ![sgilhuley](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sgilhuley/32/78471_2.png) [@sgilhuley](https://community.hubspot.com/u/sgilhuley)\
**Post date:** [October 15, 2019, 4:05pm UTC](https://community.hubspot.com/t/form-field-width-and-alignment/16755/5 "2019-10-15T16:05:30Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [October 15, 2019, 4:10pm UTC](https://community.hubspot.com/t/form-field-width-and-alignment/16755/6 "2019-10-15T16:10:13Z")

</div>

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.

> **[HubSpot Developer Extension - Chrome Web Store](https://chromewebstore.google.com/detail/hubspot-developer-extensi/gebemkdecnlgbcanplbgdpcffpdnfdfo?hl=en)**
>
> Must have for HubSpot Developers, adding convenience features to HubSpot

* * *

If this answer helped, please, mark as solved 😄

* * *

[tim@belch.io](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me [on slack](http://slack.belch.io/).

---

<div class="post-metadata">

**Author:** ![sgilhuley](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sgilhuley/32/78471_2.png) [@sgilhuley](https://community.hubspot.com/u/sgilhuley)\
**Post date:** [October 15, 2019, 4:11pm UTC](https://community.hubspot.com/t/form-field-width-and-alignment/16755/7 "2019-10-15T16:11:59Z")

</div>

Thanks so much!! Clearing my cache worked