Radio buttons label are overlapping on mobile

  • netruck
    Asked on April 2, 2016 at 1: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.

     

    Radio buttons label are overlapping on mobile Image 1 Screenshot 20

  • Elton Support Team Lead
    Replied on April 2, 2016 at 6: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:

    Radio buttons label are overlapping on mobile Image 1 Screenshot 20

    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.

  • netruck
    Replied on April 3, 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 Radio buttons label are overlapping on mobile Image 1 Screenshot 20capture of the checkboxes.

  • Chriistian Jotform Support
    Replied on April 4, 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%;

       } 

    }

    Radio buttons label are overlapping on mobile Image 1 Screenshot 20

    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.