Form not responsive on iPhone

I'm trying to use my form on the iphone 6 and the first language question's box is a lot longer than the form on my edited version, what is causing that? The form also expands so some of the content is not showing.

I just noticed when I'm playing audio on my iphone 6 and try to fill in the form it pauses the audio playing on my phone and the caption above the play button displays my form name, what is causing that?

Form: https://form.jotform.com/92546193812158

Website: https://www.quruzrides.com/driverpreregister

Your standalone form works perfectly on mobile. The fields are responsive. Perhaps the page was only zoomed in, that's why some of the contents were shown cut off? Try to zoom out it by using a pinch gesture. If the problem persists, please provide a screenshot and upload it here on the forum. Guide: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

With regards to the other issue, I'm not sure how to reproduce that. Can you provide us steps and a screenshot if possible? We'd greatly appreciate it.

We'll look forward to your reply.

Apologies. I figured out the problem now. The cut off was caused by the unresponsive configurable list widget specifically the field "When are you available to provide transportation?" in your form. To fix it, you have to make this widget responsive by simply injecting the following CSS code into this widget's settings.

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

#list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

}

Guide: How to Inject CSS Codes to Widgets

I've also updated the custom CSS code injected in your form so it would work properly with the above CSS code once injected.

Hope this fixes the responsive issue.

Ok thanks a lot.