Adjusting Name and Email Fields

Hi

Re: Insight-Academy Customer Loop Form

I need to adjust the following fields when viewed in  on Mobile devices

1. I need to reduce the prefix field so that it has enough space for 6 characters 

2. I need to adjust the gap that will be created once item 1 above is done need to adjust the first/last name fields 

3. I need to reduce the email field slightly

4. I nede to get the words "Reset Input" and "Submit" to be centralised properly on the button

In fact some these CSS code for the above are already injected but seem to no effect. Please check why is this so.

Once you have found why ...can you just display the CSS code again below for me and I will adjust the numbers to my liking so that I need not disturb you with these minor adjustments.

Please use the correct form as stated above.

Thanks

kish

I see that your form named InSight Academy Customer Loop is form 60469058843464.

On this form, your existing custom CSS is this:

#input_2, #input_reset_2 {
    padding-top : 0px !important;
    font-size : 11px;
}
.form-label.form-label-left {
    font-size : 14px !important;
}
#input_5_phone {
    width : 70px;
}
#input_5_area {
    width : 30px;
}
#input_5_country {
    width : 25px;
}
@media screen and (max-width: 480px){
    [data-type="control_phone"] .form-sub-label-container {
        width : 30% !important;
    }
}
@media screen and (max-width: 480px){
    [data-type="control_fullname"] .form-sub-label-container {
        -moz-box-sizing : border-box;
        -webkit-box-sizing : border-box;
        box-sizing : border-box;
        width : 30% !important;
    }
}
@media screen and (max-width: 480px){
    .form-label {
        width : 34% !important;
        float : left !important;
    }
    .form-input {
        width : 62% !important;
        max-width : none !important;
    }
    input[name$="[country]"],input[name$="[area]"] {
        width : 70% !important;
    }
}
.form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
    height : 30px;
}
@media only screen and (max-width: 480px){
    #input_16 {
        max-width : 50%!important;
    }
}
@media only screen and (max-width: 480px){
    input#prefix_15 {
        width : 10%!important;
    }
}

1. As you have multiple @media blocks all targeting the same screen size (max-width 480), I have tidied it up and moved the rules for mobile devices withing the same section.

2. The Full Name field on this form has the ID of 3, so the prefix field's ID in your CSS for this form should be #prefix_3, and not #prefix_15 that you were previously using. Custom CSS is form specific, so it looks like you've copied custom CSS from some older form that had a Full Name field with ID of 15.

3. Even if you used the correct ID in your code, that would not be the recommended way of changing the size of this field. This is because its size is copntrolled by its container, so even if you reduced its size, there would be lots of seemingly blank space remaining:

The way to resize the name prefix field would be to resize its container, by using the following custom CSS:

[data-type="control_fullname"] .form-sub-label-container:first-child {
    width: 20% !important;
}

As you want it to work only on mobile devices, we will place it inside the @media rule for mobile devices. As we have made the prefix field smaller, I have also adjusted the size of the first name and last name fields from 30% to 38%, so that all fields combined with their margins take the full width of the full name field.

After fixing this, and tiding up the code, the result is here:

#input_2, #input_reset_2 {
    padding-top : 0px !important;
    font-size : 11px;
}
.form-label.form-label-left {
    font-size : 14px !important;
}
#input_5_phone {
    width : 70px;
}
#input_5_area {
    width : 30px;
}
#input_5_country {
    width : 25px;
}
@media screen and (max-width: 480px){
    [data-type="control_phone"] .form-sub-label-container {
        width : 30% !important;
    }
    [data-type="control_fullname"] .form-sub-label-container {
        -moz-box-sizing : border-box;
        -webkit-box-sizing : border-box;
        box-sizing : border-box;
        width : 38% !important;
    }
    .form-label {
        width : 34% !important;
        float : left !important;
    }
    .form-input {
        width : 62% !important;
        max-width : none !important;
    }
    input[name$="[country]"],input[name$="[area]"] {
        width : 70% !important;
    }
    #input_16 {
        max-width : 50%!important;
    }
    [data-type="control_fullname"] .form-sub-label-container:first-child {
        width: 20% !important;
    }
}
.form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
    height : 30px;
}

Please try it out and let us know if this is what you were looking for.

Hi Boris

Re: Insight-Academy Customer Loop Form

Thanks for tidying my code much appreciated. Now it looks okay for both desktop and mobile views.

Only a small adjustment please view my website www.insight-acad.com and view the desktop and mobile version (by reducing the width of the browser to about the size of mobile screen) and you will see that the text "submit" and "Reset" is not centralised on the red buttons...can this be adjusted..

Thanks

kish

Hello Kish,

Please inject the following custom css code in your form and see if that solves your problem:

@media only screen and (max-width: 480px){

 #input_2, #input_reset_2 {

    padding-top: 6px !important;

 }

}

#input_2, #input_reset_2 {

    padding-top: 6px !important;

}

The following guide should help you how to inject custom css code in form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Hope this helps.

Do get back to us if you need any other changes.

Thank you!

Hi Ashwin

Thanks for the CSS code...I have not applied this code because for some strange reason when I looked at my mobile device for this form again it looks okay to me the same applies when I looked from my desktop view. The day I requested for the css code from it was not the case.

Anyway I will monitor and and keep this code handy if I need to apply later I will do so.

Thanks alot

kish

Hello kish,

You are welcome.

Do get back to us with a screenshot of the issue whenever you inject the code and we will take a look.

We will wait for your response.

Thank you!