The form width changed when an option from DDslick Dropdown widget is selected

My form : https://www.jotform.com/92263485568166

My form is embbeded here https://plungefetish.com/rates.php. 

The form works fine in desktop but on my iphone it does not work .   On my iphone when I open up the drop down menu of the DDslick labeled "Airport Transfer" it looks good, but when I make a selection from the drop down menu it makes the entire form stretch out left to right.  

I've recorded a GIF on my iphone and uploaded it to my site.  You can view it here: 

https://plungefetish.com/images/4982.gif

The GIF will show you the problem.

Please try removing this line of code: width:310px!important;

And use this instead: width: 98% !important

Also, make sure to put the enclosing curly bracket your @media code:

That should prevent the resizing issue in mobile views. Let us know if you need more help, we will be glad to assist you.

I made those changes and got the same result as before.  It becomes too big for the screen

I added this line to your widget's CSS:

.dd-selected-description-truncated {

    white-space: pre-wrap!important;

}

Please check "Airport Transfer" it should be fine.

Thank you!

It is still not working correctly.   I am using an iphone 

I think you have not added the custom CSS codes. I cannot find that in the form. I've added that for you and checked, all good now. Can you check again to your end to confirm?

It is not all good now.  

When I use the form on my Iphone and select one of the airport transfer options from the airport transfer DDslick all of the fields become elongated and stretch off the screen.  

Where did you see that it is all good now?

The problem occurs on the mobile version of the form.

I tested your form and it's working properly, I tested on iPhone 7:

If the issue persists on your website, please try re-embedding your form.

Thank you!