Move the radio buttons underneath the word.

  • Profile Image
    CrusaderMedicalCare
    Asked on August 26, 2020 at 07:31 AM

    I am struggling to move the multiple choices boxes underneath the word it represents. At present, its to the right of it and it can be difficult to see which one you are selecting. Due to the nature of the questionairre, its really important i get a reliable intake of results otherwise its pointless. 

  • Profile Image
    Ariel_P
    Answered on August 26, 2020 at 09:45 AM

    Hi there,

    Thank you for your message.

    Just to be clear, are you referring to this form, https://eu.jotform.com/201741923658055?

    I've checked your form and it currently doesn't have "multiple choices boxes".

    Are you perhaps referring to the single choice radio buttons?

    15984473032020-08-26 21_07_47.jpg

    If that the case, you can inject the following CSS code into your form to move the radio buttons under the option text.

    .form-radio-item:not(#foo) label {
        text-align: center;
        margin: auto;
        display: flex;
        flex-direction: column-reverse;
    }
    .form-radio-item:not(#foo) label::before {
        position: static;
        margin: auto;
        text-align: center;
    }
    .form-radio-item:not(#foo) label::after {
        position: relative;
        margin: auto;
        text-align: center;
        top: 41.5px;
        left: auto;
    }

    Related Guide: How to Inject Custom CSS Codes.

    Once applied, it should look something like so.

    15984493702020-08-26 21_42_30.jpg

    Please give it a try and let us know how it goes.