topic Re: Form alignment issue in CMS Development

Form alignment issue

prhewson — Thu, 09 Aug 2018 22:47:02 GMT

Hi I'm relatively new to this stuff, but I have tried to do my due dilligence and search for an answer, but I'm still stuck.

I'm having trouble centering a form in a template. I've followed this guide and added this to the style sheet:

/* To center the form within its module and applying a max-width */

form.hs-form, .hs_cos_wrapper .form-title { max-width: 600px; display: block; margin: 0 auto; }

/* To center the form title within a form module */ .hs_cos_wrapper .form-title { text-align: center; }

/* To center the form submit button */ .hs_submit { text-align: center; }

However, the form remains to be a little off center. The widget itself is centered - and it looks great when I preview the template. But once I add my own form, the form does not center within the widget - it's aligned to the left with some empty space on the right, so it looks out of line with the button and title (which are correctly centered). I can kind of fix it with some uneven padding, but this causes issues at smaller sizes - and doesn't seem like the correct answer.

Off-center fields:

This is the test page I'm working on centering the form. It's worth mentioning I am using a pre-existing template that I did not create.

https://info.commusoft.co.uk/watch-the-demo-thank-you-page-0-0

I have managed to use inspect and to make a change that fixes the issue, but I have been unable to replicate this in my template - perhaps someone with more experience might be able to provide some advice?

I'll try to show the fix I found when inspecting:

If I click on the fields I can see there is some empty space to their right.

If I untick "max-width" 500px the form properly centers!

However, this line does not exist in my style sheet or anywhere that I can find in my template. I searched for 500 and there is nothing in the style sheet refering to 500px.

Properly centered form:

Anyone know how to resolve this? or perhaps some insight into why it might be happening?

Thanks for any help!

Re: Form alignment issue

Stephanie-OG — Fri, 10 Aug 2018 02:15:33 GMT

Hi there! It looks centered when I took a look at the page now. Were you able to resolve the issue?

As for the "max-width: 500px;", it's handy to take a look at the upper right-hand corner (above your "untick" on the screenshot) where it shows the location of that CSS - clicking on its brings you to the relevant stylesheet. In this case it comes from in between those <style></style> tags that have been added to your header, which could have been added in the "Head" section on the page settings, template settings or general settings.

HubSpot Design / Development / Automation

Website | Contact

Re: Form alignment issue

prhewson — Fri, 10 Aug 2018 04:04:47 GMT

Hi Stephanie,

Thanks for the reply, I appreciate it!

Unfortunately, no it's not resolved yet - with the horizontal spacers on each side of the form it was fairly in the center, but still off to the left a bit, so it may have looked centered on first glance? Unless there is some possibility that it's just displaying weird for me...

I have now reduced the horizontal spacers so its a 3 column spacer, 6 column form , and 3 spacer. That makes the issue more apparent - and especially from within the editor, as shown below, you can see how the form fields are still signigicantly to the left within the widget area.

In regards to the max width 500px in the <style> tags - I see that it shows me "where it is", but unfortunately I have no idea where that actually is. I've checked the page head html in the page editor settings, it's not in the template style sheet, or when I edit the header module (or any other modules) in the template.

Taking a bit of a further look when inspecting the form, this is the source of the 500px. If I change it to 600px in the inspector, the form properly centers.

.pika-single{z-index:9999;display:block;position:relative;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px rgba(0,0,0,0.5)}.pika-single{*zoom:1}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{position:relative;text-align:center}.pika-title select{cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:5px;filter:alpha(opacity=0);opacity:0}.pika-label{display:inline-block;*display:inline;position:relative;z-index:9999;overflow:hidden;margin:0;padding:5px 3px;font-size:14px;line-height:20px;font-weight:bold;background-color:#fff}.pika-prev,.pika-next{display:block;cursor:pointer;position:relative;outline:none;border:0;padding:0;width:20px;height:30px;text-indent:20px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;background-size:75% 75%;opacity:0.5;*position:absolute;*top:0}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:0.2}.pika-prev,.is-rtl .pika-next{float:left;background-image:url("data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");*left:0}.pika-next,.is-rtl .pika-prev{float:right;background-image:url("data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");*right:0}.pika-select{display:inline-block;*display:inline}.pika-table{width:100%;border-collapse:collapse;border-spacing:0;border:0}.pika-table th,.pika-table td{width:14.28571%;padding:0}.pika-table th{color:#999;font-size:12px;line-height:25px;font-weight:bold;text-align:center}.pika-table abbr{border-bottom:none;cursor:help}.pika-button{cursor:pointer;display:block;-moz-box-sizing:border-box;box-sizing:border-box;outline:none;border:0;margin:0;width:100%;padding:5px;color:#666;font-size:12px;line-height:15px;text-align:right;background:#f5f5f5}.is-today .pika-button{color:#3af;font-weight:bold}.is-selected .pika-button{color:#fff;font-weight:bold;background:#3af;box-shadow:inset 0 1px 3px #178fe5;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:0.3}.pika-button:hover{color:#fff !important;background:#ff8000 !important;box-shadow:none !important;border-radius:3px !important}.pika-week{font-size:11px;color:#999}.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 fieldset{border:0;padding:0;margin:0;max-width:500px}.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 fieldset.form-columns-1 .hs-input{width:95%}.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 fieldset.form-columns-1 .input{margin-right:8px}.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 fieldset.form-columns-1 input[type="checkbox"],.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 fieldset.form-columns-1 input[type="radio"]{width:auto}.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 fieldset.form-columns-2 .hs-form-field{width:50%;float:left}.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 fieldset.form-columns-2 .input{margin-right:8px}.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 fieldset.form-columns-3 .hs-form-field{width:32.7%;float:left}.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 fieldset.form-columns-3 .input{margin-right:8px}.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 label.hs-hidden{visibility:hidden}.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 .hs-field-desc{width:100%}.hsformerror{margin:0 0 2px;padding:2px 6px;height:auto;background-color:#fdd2d0;font-size:11px;border:1px solid #fcb3af;padding:4px 16px 4px 10px;color:#000;display:none;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #fdd2d0));background-image:-webkit-linear-gradient(#fefefe, #fdd2d0);background-image:-moz-linear-gradient(#fefefe, #fdd2d0);background-image:-o-linear-gradient(#fefefe, #fdd2d0);background-image:linear-gradient(#fefefe,#fdd2d0);-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 0 6px #ddd;-moz-box-shadow:0 0 6px #ddd;box-shadow:0 0 6px #ddd;z-index:99999}.hsformerror em{border:10px solid;border-color:#fdd2d0 transparent transparent;bottom:-17px;display:block;height:0;left:60px;position:absolute;width:0}.hsformerror p{font-family:Lucida Grande,Lucida Sans Unicode,bitstream vera sans,trebuchet ms,verdana,sans-serif;margin:0;float:left;margin-right:8px}.hsformerror:hover{cursor:default}.hsformerror .close-form-error{float:right;display:inline;top:3px;position:absolute;font-family:Verdana !important;color:#b17c79 !important;cursor:pointer !important;font-size:11px !important;font-weight:normal !important}.hsformerror .close-form-error:hover{color:#cc8884}@media (max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px){form.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 .form-columns-2 .hs-form-field,form.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 .form-columns-3 .hs-form-field{float:none;width:100%}form.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 .form-columns-2 .hs-form-field .hs-input,form.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 .form-columns-3 .hs-form-field .hs-input{width:95%}form.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 .form-columns-2 .hs-form-field input[type="checkbox"],form.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 .form-columns-2 .hs-form-field input[type="radio"],form.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 .form-columns-3 .hs-form-field input[type="checkbox"],form.hs-form-802560a4-270a-43e6-8497-6f7eb470b95b_13d4efdf-1f14-498c-ae83-5ddf30ea0a71 .form-columns-3 .hs-form-field input[type="radio"]{width:auto}}.legal-consent-container .field.hs-form-field{margin-bottom:8px}.legal-consent-container .hs-field-desc.checkbox-desc{margin:-12px 0 0 21px}.legal-consent-container .hs-form-booleancheckbox-display p{margin:0;display:inline-block}.legal-consent-container .hs-error-msgs label{color:#f2545b}.legal-consent-container ~ .hs_recaptcha{margin-top:18px}#hs-outer-captcha-target,#hs-outer-captcha-target *{display:none;height:0;width:0}.hubspot-link__container{font-size:11px;position:relative;top:-18px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}.hubspot-link{color:#9fa0a2;text-decoration:none}.hubspot-link:hover{text-decoration:underline}.hubspot-link__icon{margin-bottom:-1px;margin-right:5px}

.pika-single seems to be a date picker after googling it. Not sure if that is something Hubspot is using or something that the creator of the template would have included. Do you know where else I might be able to access something like that to make the edit?

Thanks a lot for your help!

Re: Form alignment issue

tjoyce — Fri, 10 Aug 2018 11:55:01 GMT

Just add this to the bottom of your stylesheet:

.hs-form fieldset {
    max-width: 600px;
}

Re: Form alignment issue

prhewson — Sat, 11 Aug 2018 14:05:56 GMT

Thank you, that did it! I had tried adding that as I saw it in inspect view, however, I had included the long number after it.

Thanks again!