How to make form responsive

  • Profile Image
    knuivert
    Asked on May 27, 2016 at 04:28 AM
    Next, I would like all input fields (textbox and textarea) to have the same width, but they also have to be responsive so small fields on phone, middle size on tablet and large width on desktop. Is this possible? If so how to implement this?
    I already search the forum and saw that people set up a fixed width, but that width is whether too small or too large on small or big screen sizes. Can this be done another way?
  • Profile Image
    Carina
    Answered on May 27, 2016 at 05:28 AM

    It depends on the type of fields that you have, but for the most common text-box and text-area fields you can use this code:

    .form-textbox {

        width: 300px !important;

    }

     

    .form-textarea {

           width: 300px !important;

    }

     

    @media screen and (max-width:600px)

    {

    .form-textbox {

        width: 90% !important;

    }

     

    .form-textarea {

           width: 90% !important;

    }

    }

    The blue code is for responsiveness. You can adjust the values.

    As I mentioned some additional code might be needed for specific fields.

    Let us know if we can assist you further.