Form not responsive: Adjusting the input width using CSS

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!

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.

Thanks! I'll give it a shot.

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

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?

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.

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)

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.

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

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.