Checkbox items are displayed in different font sizes when viewed on iPhone devices.

  • Zimmfor
    Asked on July 18, 2019 at 6:09 PM

    Hello,

    When I view my form on a mobile device the text sizes are different, please see screenshot below. How would I fix this?

    1563487685IMG 1512 Screenshot 10

  • David JotForm Support Manager
    Replied on July 18, 2019 at 9:11 PM

    Could you let us know which mobile device and browser you are using? I have checked in my Android device using Chrome browser, and the text looks the same:

    1563498603result Screenshot 10

  • Ryan
    Replied on July 19, 2019 at 10:38 AM

    I am using an iPhone and both browsers Chrome and Safari. The screenshot below is from Safari.

    1563547061IMG 1517 Screenshot 10

  • John Support Team Lead
    Replied on July 19, 2019 at 11:54 AM

    It seems that the form is embedded on a website. Am I correct? 

    If so, please provide us the URL of the webpage so we could check that too. Also, you can try embedding the form using the iframe embed method. Here's a guide on Getting-the-Form-iFrame-Code.



  • Zimmfor
    Replied on July 22, 2019 at 1:08 PM

    Hi John,


    It is embedded on a website using the iframe. Link is: http://zimmfor.com/norpacsupplierdeclaration.html

    Thanks


  • David JotForm Support Manager
    Replied on July 22, 2019 at 2:55 PM

    I was able to reproduce the error on an iPhone emulator:

    1563821389reproduced Screenshot 10

    I figured out that the issue is with the width of the labels, which is not set to 100% for all, because you have injected the following CSS code:

    1563821533width Screenshot 21

    However, this can be fixed by injecting the following CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

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

    .form-checkbox-item label{

        width: 100% !Important;

    }

    }

    Result:

    1563821659result Screenshot 32

    Let us know if you need more help, we will be glad to assist you.

  • Zimmfor
    Replied on July 22, 2019 at 4:49 PM

    Thank you. Unfortunately, it only fixed the font issue. See screenshots below.

    1563828525IMG 1558 Screenshot 101563828544IMG 1559 Screenshot 21

  • John Support Team Lead
    Replied on July 22, 2019 at 6:02 PM

    Apologies but if my understanding is correct, you want the font sizes to be uniform too, am I right?

    If so, you can add a code to that CSS provided by my colleague. Please use this one:

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

    .form-checkbox-item label{

        width: 100% !Important;

        font-size: 10pt !important;

    }

    }

    You can also change the size based on your preferrence.

    But if you're referring to a different concern, please let us know in details.

  • Zimmfor
    Replied on July 23, 2019 at 5:54 PM

    Hi John,

    That seems to have worked. The only thing I noticed was the radial buttons, see screenshot below, not a big deal but is a nice to have. Is there a way to get these to be the same size across the board?

    Thanks

    1563918853IMG 1560 Screenshot 10

  • David JotForm Support Manager
    Replied on July 23, 2019 at 7:47 PM

    Please try adding the following CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

    .form-checkbox{

    min-width: 11px !Important;

    max-width: 11px !Important;

    }

    }

    Result:

    1563925495result 002 Screenshot 10

    Let us know if you need more help.

  • David JotForm Support Manager
    Replied on July 23, 2019 at 7:48 PM

    This is the code:

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

    .form-checkbox{

    min-width: 11px !Important;

    max-width: 11px !Important;

    }

    }

  • Zimmfor
    Replied on July 24, 2019 at 12:09 PM

    Looks good! Thank you.