The width of the dropdown is too small on mobile devices

Dear Jotform guys,

I struggle with the width of one my field ("que cherchez vous field") on a mobile browser. 

Here is the url of the form : https://form.jotform.com/42083997895980

Have a look : while on jotform interface it is perfect :  

On mobile, the field que cherchez vous is too small to make the text appear perfectly : 

Do you have a clue ? 

Thanks !

Adrien

You may want to make it 100% on mobile devices. If yes, inject the following custom CSS codes:

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

[data-type="control_dropdown"] .form-input, [data-type="control_dropdown"] .form-input-wide {

    width: 100% !important;

}

}

 

Please follow the steps on this guide to inject the codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. 

It worked thanks so much Welvin, you rock !

Hello there, 

merry Christmas to all of jotforms support rockers.

As I said in this topic, it worked for regulars fields but when it comes to particular fields as payment fieds within the a payment widget, it does not work unfortunately : 

Any help ? 

Cheers Guys !

I assume it's this form you're working on http://www.jotformeu.com/form/72962389752370

I added the below block of code to the existing code (in your form) provided by my colleague:

input#input_65_cc_firstName {

    width: 115px!important;

}

label#sublabel_cc_lastName {

    width: 130px!important;

    margin-left: -250px!important;

}

input#input_65_cc_lastName {

    margin-left: -250px!important;

    width: 115px!important;

}

input#input_65_cc_ccv {

    margin-left: -210px!important;

}

label#sublabel_cc_ccv {

    margin-left: -210px!important;

}

select#input_65_cc_exp_year {

    margin-left: -210px;

}

label#sublabel_cc_exp_year {

    margin-left: -210px!important;

}

input#input_65_cc_number {

    width: 45%!important;

}

select#input_65_cc_exp_month {

    width: 45%!important;

}

select#input_65_cc_exp_year {

    width: 115px!important;

}

input#input_65_cc_ccv {

    width: 115px!important;

}

And it looks like this on mobile:

Please check and let us know how it worked.

Thank you!