When I view the form on a phone the student name part keeps getting cut off

  • Profile Image
    MCCJAY
    Asked on January 11, 2017 at 01:16 PM

    Can I ask you one more question?

     

    When I view the form on a phone the student name part keeps getting cut off. Any suggestion? 

  • Profile Image
    Kevin_G
    Answered on January 11, 2017 at 05:23 PM

    Please inject this CSS code to properly display the fields: 

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

        [data-type="control_fullname"] span.form-sub-label-container {

                display: block;

            }

     

            #id_23{

                width: 100%;

            }

    }

     

    This guide will help to inject it: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps. 

  • Profile Image
    MCCJAY
    Answered on January 24, 2017 at 04:38 PM

    Hello Again,

    I am now having that same problem with my phone number field. 

     

    I still have that same CSS code injected.

     

    Thank you for your help

  • Profile Image
    Kevin_G
    Answered on January 24, 2017 at 10:08 PM

    You may try removing the previously given code since it affects one fiel only and then inject the following instead that will help you with all the fields:

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0;

    }

     

    .form-line{

    width: 100%;    

    }

     

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

     

    .form-label-left, .form-label-right{

    width: auto !important;

    }

     

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

     

    .form-input {

    width: 100% !important;

    }

     

    .form-all{

    width: 75% !important;

    }

     

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

    }

     

    This will display properly in mobile devices the current and future added fields to the form. 

    Hope this helps.