CMS Development

sgilhuley
参加者

Form Field Width and Alignment

解決

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



1件の承認済みベストアンサー
tjoyce
解決策
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Form Field Width and Alignment

解決

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件の返信
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Form Field Width and Alignment

解決

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

0 いいね!
sgilhuley
参加者

Form Field Width and Alignment

解決
0 いいね!
tjoyce
解決策
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Form Field Width and Alignment

解決

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

sgilhuley
参加者

Form Field Width and Alignment

解決

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 いいね!
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Form Field Width and Alignment

解決

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 いいね!
sgilhuley
参加者

Form Field Width and Alignment

解決

Thanks so much!! Clearing my cache worked