Make multiple inline fields responsive on mobile

  • epkpanama
    Fecha de consulta 26 de enero de 2024, 10:14

    buen día


    solicito su apoyo para poder ajustar el form en el celular y que aparezca bien, adjunto captura. Y necesito que se vea lo más parecido a esto

    Make multiple inline fields responsive on mobile Image 1 Screenshot 20



    gracias!

    Jotform Thread 11193901 Screenshot
  • Mike_G Jotform Support
    Fecha de respuesta 26 de enero de 2024, 17:35

    Hi epkpanama,

    Thanks for your patience and understanding. I understand you want to make multiple inline fields on your form responsive on different screen sizes, especially on mobile. Let me show you how to do it:

    1. Open your form in Form Builder, and click on the Paint Roller icon on the right side of the page to open Form Designer.

    2. In the Form Designer menu, click on the Styles tab, scroll down, and remove all the custom CSS codes in the Inject Custom CSS box.

    Make multiple inline fields responsive on mobile Image 1 Screenshot 60

    3. Copy the CSS codes below:

    /*make multiple inline fields mobile responsive - #11193901 */
    label#label_58 {
        height: 19px;
    }
    #input_58 {
        text-align: center !important;;
    }
    #id_58 {
        min-width: 40px !important;
    }
    li#id_41 {
        width: calc(50% - (50% - 270px));
    }
    @media screen and (max-width:592px) {
    li#id_41 {
        width: calc(55% - 8px) !important;
    }
    li#id_52 {
        width: calc(30% - 8px) !important;
        min-width: calc(30% - 8px) !important;
    }
    }
    @media screen and (max-width:480px) {
    ul.form-section {
        padding: 0px !important;
    }
    }
    /*Ends here*/

    4. Paste the custom CSS codes into the Inject Custom CSS box and close the Form Designer menu to save the changes.

    Make multiple inline fields responsive on mobile Image 2 Screenshot 71

    5. Next, click on the Gear icon on the right of these form fields to open their Properties window.

    • Correo / Email
    • Especifique / Specify

    6. Under the Advanced tab, toggle the Move to a new line property of the fields to the On position.

    Make multiple inline fields responsive on mobile Image 3 Screenshot 82

    And that's it. Check out the screenshots below to see the result:

    Desktop:

    Make multiple inline fields responsive on mobile Image 4 Screenshot 93

    Mobile:

    Make multiple inline fields responsive on mobile Image 5 Screenshot 104

    I've cloned your form and made the necessary adjustments so you can test it before applying the changes to yours. You can find my cloned form here. Feel free to clone my form to your account so you can inspect it. Click here to see how to clone the form. Also, check out our guide explaining how to inject custom CSS codes into your form.

    Give it a try, and reach out again if you have any other questions.

  • epkpanama
    Fecha de respuesta 27 de enero de 2024, 13:05

    ty! I resolve it