Mobile Screen: Change width of form - Responsive

  • CruizeDD
    Asked on March 17, 2020 at 2:40 PM

    I want my form to be more wide than long on the website but revert to long on the mobile. How do I do that?

    Page URL: https://www.jotform.com/build/200277965393161
  • Carlos_C
    Replied on March 17, 2020 at 2:56 PM

    I'm currently looking at your form, I'll update you on this same thread as soon as I have some news.

  • Carlos_C
    Replied on March 17, 2020 at 3:29 PM

    Hello,

    Thank you for contacting us, after checking your account I made a clone https://form.jotform.com/200766238856969 and I was able to change the width just for the text fields.

    I add the following code to your existing custom CSS code:

    .form-sub-label-container {

    width: 100%!important;

    }

    1584473342Screenshot 2020 03 17T132843 Screenshot 30

    Under the media screen and (max-width: 768px), and I have the following result:

    Mobile Screen: Change width of form Responsive Image 1 Screenshot 41

     

    Using the Chrome Dev tools I test it using different screen sizes:

     

    Mobile Screen: Change width of form Responsive Image 2 Screenshot 52

    Guide How-to-Inject-Custom-CSS-Codes

    If you need any further assistance, please let us know. We will be happy to help.