Form not responsive: Adjusting the input width using CSS

  • Profile Image
    boxerrebellion
    Asked on September 22, 2016 at 09:19 AM

    I'm really struggling to set the width of the form inputs. It seems like something is over-riding the individual width settings, but I can't find it.

     

    I need some widths to be just 4 spaces wide, but then need others (like "Comments") to be wider.

     

    When I go to the preferences on the specific question, I set the input to the width I want but see no difference when previewed.

     

    Thanks for any help!

     

  • Profile Image
    Jan
    Answered on September 22, 2016 at 12:02 PM

    We can help you adjust the width of the fields using CSS.

    /* customer number field */
    #input_506 {
       width: 200px !important;
       max-width: none !important;
    }

    /* email fied */
    #input_27 {
       width: 200px !important;
       max-width: none !important;
    }

    /* comments field */
    #input_508 {
       width: 400px !important;
       max-width: none !important;
    }

    /* all other fields */
    .form-textbox {
       max-width: 100px !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. As you can see on the CSS code above, you can adjust the width you preferred. The text highlighted in light green corresponds to the field you want to change.

    Here's the result:

    If you have any questions, let us know. Thank you.

  • Profile Image
    boxerrebellion
    Answered on September 22, 2016 at 12:04 PM

    Thanks! I'll give it a shot.

  • Profile Image
    Jan
    Answered on September 22, 2016 at 01:22 PM

    Sure! If there are any issues, let us know so that we can further assist you. Cheers!

  • Profile Image
    boxerrebellion
    Answered on September 22, 2016 at 02:02 PM

    Thanks - I actually do have another question on this.

     

    The CSS worked fine for desktop, but the width of the form-textbox is not changing on mobile platforms - iPhone and iPad tested.

     

    Any idea why?

  • Profile Image
    Jan
    Answered on September 22, 2016 at 03:14 PM

    I don't have an iPhone or iPad to test the issue with. However, when I checked the form in my Android phone, it showing properly. Also, the form is set to responsive which is why when you open the form in a phone, it 'll look like this:

    Would you like the text box and the label in 1 row only? Please give me more time to work on this issue. I'll contact you once I have a solution. Thank you for understanding.

  • Profile Image
    boxerrebellion
    Answered on September 22, 2016 at 03:18 PM

    Hi! No worries.

     

    Yes, I'm hoping that the label and text box to be on one row - there's so many, it would make scrolling easier.

     

    I've tried responsive selected and not selected and haven't seen much difference (though the embedded page has widths set for various displays, so there may not be much for the form to do different)

  • Profile Image
    Jan
    Answered on September 22, 2016 at 04:46 PM

    Thank you for patiently waiting. Please try these solutions:

    1. Add the Mobile Responsive widget to your form.

    2. After that, please insert this custom CSS code:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

        .form-label {
           width: 150px !important;
           font-size: 0.77em !important;
       }

        input[type=text], input[type=email], input[type=tel], textarea {
           width: 50px !important;
       }

        .form-input {
           width: 50px !important;
           float: right !important;
           margin-right: 20px !important;
       }

        #input_508 {
           width: 300px !important;
       }

    }

    @media only screen and (min-width : 375px) and (max-width : 667px) {

        .form-label {
           width: 150px !important;
           font-size: 0.9em !important;
       }

        input[type=text], input[type=email], input[type=tel], textarea {
           width: 50px !important;
       }

       .form-input {
           width: 50px !important;
           float: right !important;
           margin-right: 20px !important;  
       }

       #input_508 {
           width: 300px !important;
       }     

    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

        .form-label {
           width: 300px !important;
           font-size: 0.9em !important;
       }

        input[type=text], input[type=email], input[type=tel], textarea {
           width: 100px  !important;
       }

        .form-input {
           width: 200px !important;
           float: right !important;
           margin-right: 20px !important;
       }

        #input_508 {
           width: 300px  !important;
       }

    }

    Here's the result:

    Hope that helps. Let us know if you need further assistance. Thank you.

  • Profile Image
    boxerrebellion
    Answered on September 22, 2016 at 07:38 PM

    Eureka! Jan, you're the best. Thank you so much for your help!!! It works perfectly!

  • Profile Image
    Kevin_G
    Answered on September 22, 2016 at 08:57 PM

    On behalf of my colleague Jan, you're most welcome. 

    If you need further assistance, please feel free to contact us, we will be glad to help you.