-
evank001Asked on October 31, 2017 at 5:31 AM
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
Page URL: https://form.jotform.com/42083997895980 -
Welvin Support Team LeadReplied on October 31, 2017 at 6:31 AM
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.
-
evank001Replied on October 31, 2017 at 8:32 AM
It worked thanks so much Welvin, you rock !
-
evank001Replied on December 26, 2017 at 4:31 AM
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 !
-
Nik_CReplied on December 26, 2017 at 5:23 AM
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!