How to change the width of all question to be same

  • Profile Image
    bodybuddies
    Asked on August 30, 2013 at 08:53 AM

    Hello, I keep trying and failing to adjust the widths to match the 320 width of my form. Can you provide me a step by step instruction of how to do this?

     

    Thanks!

  • Profile Image
    jedcadorna
    Answered on August 30, 2013 at 09:40 AM

    Hi, 

    I made a clone of the form and I can see that the form width is set to 320 and when I try to adjust the form width adapts. Please take a look at the screenshot. If its possible you can attach a screenshot to further explain the issue and that would be a big help to resolve this case.

     

    width

    Thanks,

    Jed

  • Profile Image
    bodybuddies
    Answered on August 30, 2013 at 11:08 AM
    Jed,
    Sorry for not clarifying. I'm talking about the individual form fields. I
    would like them all to the be the same width--the width of the form. They
    currently look very unprofessional with all different widths.
    Thanks,
    Kristy
  • Profile Image
    ashwin_d
    Answered on August 30, 2013 at 12:36 PM

    Hello Kristy,

    To make all your form fields of the same width, please inject this custom css:

    input[type=email],input[type=howdid19], textarea {

    width:280px !important;}

    #first_15, #last_15 {width: 140px !important;}

     

    This should adjust the size of all fields in your form except the reCaptcha question as it can't be changed. You need to download your form's source code to change the width or you chould revert back to normal captcha field.

    Here is the guide which should help you: How to Inject Custom-CSS Codes

    Hope this helps.

    Thank you!

  • Profile Image
    abajan
    Answered on August 30, 2013 at 09:24 PM

    Hi Kristy,

    After much tinkering with a clone of your form, I was able to achieve this result. If you would like a similar outcome, just inject the following CSS:

    .form-line-column {
    width: 305px;
    padding-left: 9px;
    }

    .form-textarea {
    width: 285px;
    }

    #input_19,
    #recaptcha_image img,
    #recaptcha_response_field {
    width: 285px !important;
    }

    #cid_9 {
    padding-left: 1px !important;
    }

    #recaptcha_response_field {
    margin-left: 7px;
    }

    #cid_7 {
    width: 291px;
    }

    Should you require further assistance with this, we'd be happy to help.


    Cheers

  • Profile Image
    bodybuddies
    Answered on September 06, 2013 at 12:49 PM
    Thank you so much! This was SO helpful! I find that this only works when
    each field is expanded. What if I shrink a field so I can fit two on the
    same line? How do I adjust the widths for those?
  • Profile Image
    guilledutra
    Answered on September 06, 2013 at 02:04 PM

    Hi,

    Could you provide us an example of which fields do you need to have at the same line in order to give you better help?

    Thank