Radio buttons label are overlapping on mobile

  • Profile Image
    netruck
    Asked on April 02, 2016 at 01:32 PM

    Also the radio buttons are only not appearing correctly on the Sales page.  I have radio buttons on that page vs. two. If I need to I can use a dropdown.

     

  • Profile Image
    EltonCris
    Answered on April 02, 2016 at 06:19 PM

    Inject this CSS codes to your form, this should display radio buttons properly on mobile.

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

    .form-multiple-column[data-columncount="5"] .form-radio-item, 

    .form-multiple-column[data-columncount="5"] .form-checkbox-item {

        width: 100%;

    }

    .form-checkbox-item label, .form-radio-item label {

        word-wrap: normal;

    }

    .form-multiple-column {

        margin-left: 0;

    }

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Result:

    I can also see that you have existing CSS codes injected to your form. If by chance the above CSS codes doesn't work, it might let us know so we can assist you further.

  • Profile Image
    netruck
    Answered on April 03, 2016 at 10:45 PM

    Thank you!  This has helped with the radio button - but it didn't fix the checkboxes.  Any help with that?  Attached is a screen capture of the checkboxes.

  • Profile Image
    Chriistian
    Answered on April 04, 2016 at 12:29 AM

    You can inject the css code below to fix the checkboxes.

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

      .form-multiple-column[data-columncount="3"] .form-checkbox-item {

        width: 100%;

       } 

    }

    Here's a cloned demo that you can see in action: https://form.jotform.com/60940147858968 

    If you need further assistance, please let us know.
    Regards.