How to change multiple choice layout in mobile version?

  • Profile Image
    crich8
    Asked on June 03, 2019 at 03:53 PM
    Hi,
    Here is the form link: https://form.jotform.com/91356208243151
    The link you have is the one I am currently using where I embedded this
    form.
    I was able to fix the initial problem I had after some serious bugs with
    the form editor. But now I want my Yes and No questions to be in 2 columns.
    I believe they used to be in columns and were switched back to one. I have
    set it to 2 columns in the editor I think it is just bugged right now.
    Please see if you can fix this and help me optimize this form to look and
    feel better. I can't seem to get the padding right on each part of the form
    to make it easy for the user to fill it out.
    Connor
  • Profile Image
    Richie
    Answered on June 03, 2019 at 04:33 PM

    I have checked your form and the yes or no choice are separated in to two columns. When viewed in the Desktop version.

    To clarify, are you referring to the Mobile version?

    You may add this custom CSS to align the yes or no question in once column.


    @media (max-width: 480px){

    .form-checkbox-item:not(#foo), .form-radio-item:not(#foo) {

        width: 40%;

    }
    }

    Sample Screenshot:

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

    Also, how do I make the answers bigger? I want the user to easily tap the
    answer they want.

    Your font questions are large already. However, if you want to increase them you can do it in your Advanced CSS Designer.

    Please give it a try and let us know if you need further assistance.

  • Profile Image
    crich8
    Answered on June 03, 2019 at 05:43 PM
    Yes, I want the Yes and No answers to be separated into two columns on
    mobile.
    I want to increase the font size and box size for the answers.
    ...
  • Profile Image
    Elton
    Answered on June 03, 2019 at 07:47 PM

    Please inject these CSS codes to your form. This should make the yes/no question side by side.

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

    span.form-radio-item {

        width: 50% !important;

        box-sizing: border-box;

    }

    }

    Guide: How to Inject Custom CSS Codes

    Result:

    With regards to the font size and the box size, I can see it's increased in size, do you still need them to be changed? If yes, can you specify which fields? Also which box you're referring?

  • Profile Image
    crich8
    Answered on June 05, 2019 at 09:50 AM

    Thank you, I want the check box next to yes and no and the drop down bars to be bigger so it is easier for the user to click these. How do I do this?

    Also, I want there to be more space between the next/back buttons and the dropdown bars. On mobile you can clearly see that they are very close to each other I want it to be more spaced out. I noticed that on the yes and no questions the space is fine. It is only a problem on the drop down and fill out questions.

  • Profile Image
    crich8
    Answered on June 05, 2019 at 10:04 AM

    Okay so I think I fixed it by making the button size block instead of large and I figured out how to increase the height of the dropdown bar.

    Let me know if there is anything else I should do to make my form better for mobile, thanks.

  • Profile Image
    crich8
    Answered on June 05, 2019 at 10:26 AM

    I can't seem to get the progress bar to work either.

  • Profile Image
    Richie
    Answered on June 05, 2019 at 11:40 AM

    I have checked your form but I can't seem to find any progress bar.

    You may add a progress bar in your form using the Progress bar widget.

    Please give it a try and let us know if you have further questions.


  • Profile Image
    crich8
    Answered on June 06, 2019 at 08:41 AM

    Why does my form heading look like this on desktop? https://form.jotform.com/91356208243151


    It looks fine on mobile.

  • Profile Image
    crich8
    Answered on June 06, 2019 at 08:50 AM

    I have been noticing a steep drop off in conversions the past few days and I can't seem to understand why this is happening. Do you notice anything wrong with my form?

  • Profile Image
    Richie
    Answered on June 06, 2019 at 09:41 AM

    I have checked your form and it seems the header CSS for desktop view was not set.

    Kindly remove your old custom CSS and replace it with:


    @media screen and (max-width:480px){
        span.form-radio-item {
            width : 50% !important;
            box-sizing : border-box;
        }
        #header_1{
    margin-left: 0px  !important;


    }
    }

    #header_1{
    margin-left: -240px;
    margin-top: 30px;
    }

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

    Sample form:https://form.jotform.com/91563780403962

    Regarding a drop of conversion of your form, I can't seem to find any issue with your form except for the headers.

    Please give it try and let us know if you need further assistance.