Checkbox items are going out of the mobile screen

  • Profile Image
    kimiwalker
    Asked on October 07, 2017 at 08:25 AM

    In the checkbox, the "n" of "Hypertension" and "Unsure" of "Unknown/Unsure" is going out of screen on mobile. How to fix it?

  • Profile Image
    Welvin
    Answered on October 07, 2017 at 01:30 PM

    I would suggest viewing the form on an actual mobile device. I viewed the form using my Samsung mobile, the responsive style is working. The only issue I noticed is the right padding which then shows the background of the form. Here's a screenshot:


    I'm looking for a solution on the padding. I'll let you know when I have it. 

  • Profile Image
    Welvin
    Answered on October 07, 2017 at 01:36 PM

    Here's the fix:

    1. Change Unknown/Unsure to multiple words, like Unknown or Unsure. This way, the text will move down on mobile device view. The white-space property is already set to normal which means to move texts into a new line. 

    2. Inject the following custom CSS codes:

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

    .jotform-form .form-all {

        width: 100% !important;

    }

    }

    Follow our steps on this guide to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes