Hi is there anyway to resize my form to mobile

  • Unwelcome
    Asked on January 7, 2022 at 4:55 PM

    I created this form and this is what it looks like on mobile -- the text is going off the screen.


    It looks fine on desktop, but no matter what adjustments I make to the sizing -- mobile always looks the same with the text cut off.


    1641592424 61d8b66834e88 Screen Shot 202 Screenshot 10

    Jotform Thread 3649509 Screenshot
  • Kenneth JotForm Support
    Replied on January 8, 2022 at 2:09 AM

    Thank you for reaching support,

    I customized the form as best as I could.

    Please insert these codes into your Inject Custom CSS Area: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) {

    .form-all {

      display: inline-block !important;

    }


    label#label_3 {

      float: right !important;

    }

    div#cid_3 {

      display: inline-block !important;

      padding-bottom: 20px !IMPORTANT;

    }

    label#label_8 {

      float: left !important;

    }

    li#id_9 {

      display: inline-block !important;

    }

    #cid_9 span[data-input-type="areaCode"].form-sub-label-container {

      width: 30% !important;

    }

    input#input_9_area {

      width: 100% !important;

    }

    #cid_9 span[data-input-type="phone"].form-sub-label-container {

      width: 70% !IMPORTANT;

    }

    li#id_4 {

      display: inline-grid !important;

    }

    li#id_14 {

      display: inline-grid !important;

    }

    li#id_18 {

      display: inline-grid !important;

    }

    li#id_11 {

      display: inline-grid !important;

    }

    li#id_12 {

      display: inline-grid !important;

    }

    li#id_6 {

      display: inline-grid !important;

    }

    li#id_5 {

      display: inline-grid !important;

    }

    li#id_24 {

      display: inline-grid !important;

    }

    li#id_16 {

      display: inline-grid !important;

    }

    li#id_22 {

      display: inline-grid !important;

    }

    li#id_17 {

      padding-top: 30px !IMPORTANT;

      padding-bottom: 30px !important;

    }

    }

    Let us know if you have any further questions.

    Best.