How to optimize my form for mobile devices?

I am working on a form that needs to be usable on both desktop and mobile devices.  I am finding that fields I create and are only 10 characters wide display on a smartphone filling the entire width of the screen.  

How do I optimize my form so it will usable on a smartphone as well as on a desktop?

I've checked your form on my device and fields are looking fine.

In mobile view, I noticed the following problems:

1. The address field title is on the right top of the field.

I move the title to the left corner of the field and it looks like below:

2. The buttons of the Button Radios Widget are not responsive for mobile. The second button's texts are missing.

I fixed the buttons like below:

You can make the arrangements with CSS using Advanced Designer.

Please follow the instructions below:

1. Click on the For Designer icon and then click on CSS tab.

2. Please paste the following CSS code to CSS Editor.

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

    .form-label-left, .form-label-right {

        text-align : left !important;

    }

    .wrapperButtonRadio label {

        display : block !important;

    }

}

Advanced CSS Editor view is below:

Then please click on the Save button.

If your problem still occurring, please send us screenshots of the problem.

We will be waiting for your response.

My initial concern was how the Student Name and Goal number of laps were extending fully across the screen.  No matter how I adjusted the text field length property in these fields they still were full width.  See the attached screenshot from an Android phone.

Please use these CSS codes to resize those fields in mobile view:

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
input#input_97 {
        width: 150px!important;
}
input#input_99 {
width: 150px!important;
}
input#input_111{
width: 150px!important;
}
input#input_108{
width: 150px!important;
}
}

Guide: How-to-Inject-Custom-CSS-Codes

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