Form alignment issue

SOLVE
Highlighted
Occasional Contributor

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:

Screen Shot 2018-08-09 at 18.38.11.png

 

 

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.

Screen Shot 2018-08-09 at 18.37.13.jpg

 

Properly centered form:

Screen Shot 2018-08-09 at 18.37.57.png

 

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

 

Thanks for any help!

1 Accepted solution

Accepted Solutions
Regular Advisor | Gold Partner | HubSpot Certified Trainer

Just add this to the bottom of your stylesheet:

.hs-form fieldset {
    max-width: 600px;
}
Reply
0 Upvotes
4 Replies
Top Contributor

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. 

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

Reply
0 Upvotes
Occasional Contributor

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.

Screen Shot 2018-08-09 at 23.40.25.png

 

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{cursorSmiley Tongueointer;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;cursorSmiley Tongueointer;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{cursorSmiley Tongueointer;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;cursorSmiley Tongueointer !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!

Reply
0 Upvotes
Regular Advisor | Gold Partner | HubSpot Certified Trainer

Just add this to the bottom of your stylesheet:

.hs-form fieldset {
    max-width: 600px;
}
Reply
0 Upvotes
Occasional Contributor

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!