-
charitychallengeAsked on October 29, 2015 at 4:38 AM
Is it possible to make the Expiry Date fields in the Stripe Connector Responsive (narrower) on small devices?
I have set to Responsive, but does not seem to help.
Please see this payment form to understand what I mean:
http://www.jotform.com//?formID=53008256217955#
You will need to enter an email address and Amount, followed by selecting credit card type to see this - the expiry date fields are far wider than they need to be.
If there is anything else you can recommend to make this form look compact and impactful, please feel free to advise.
Thanks
-
Mike_G JotForm SupportReplied on October 29, 2015 at 9:32 AM
I was able to see what you mean,
I will work with a solution and will post my reply as soon as I have one.
Thank you.
-
Mike_G JotForm SupportReplied on October 29, 2015 at 10:53 AM
You can add this CSS codes to your form using this guide: How-to-Inject-Custom-CSS-Codes
select#input_1_cc_exp_month.form-dropdown.cc_exp_month{
width: 97% !important;
}
select#input_1_cc_exp_year.form-dropdown.cc_exp_year{
width: 97% !important;
position: relative !important;
left: 6px !important;
}
label#sublabel_cc_exp_year.form-sub-label{
position: relative !important;
left: 6px !important;
}
.form-address-table tbody > tr:nth-child(4) td:nth-child(1) span {
width: 50% !important;
}
Here's how it will look like after
Here's the link to the form I have used for testing: https://form.jotform.com/53013992115955
I hope this helps. Let us know if you need any further assistance. Thank you.
-
charitychallengeReplied on October 29, 2015 at 4:08 PM
Thank you for this.
Can you please also point to the code that I need to modify where I can make these fields and also the $ amount field much narrower to match the max size of their contents? Obviously their contents will be far narrower, so they don't actually have to evenly fit the width of the screen - this is actually what I am after.
Thanks.
-
Elton Support Team LeadReplied on October 29, 2015 at 7:27 PM
This is the CSS code to make the amount field wider.
#input_8 {
width: 100% !important;
max-width: 100% !important;
}
And this is for the CCV
.form-textbox.cc_ccv {
width: 100% !important;
}
You can also decrease the 100% value if you want to adjust its width.
Please let us know if there's anything else you need help with.