Optimise and make Stripe Expiry Date fields responsive and narrower for Smart Phones etc

  • Profile Image
    charitychallenge
    Asked on October 29, 2015 at 04: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

     

  • Profile Image
    Mike_G
    Answered on October 29, 2015 at 09: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.

  • Profile Image
    Mike_G
    Answered 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.

     

  • Profile Image
    charitychallenge
    Answered on October 29, 2015 at 04: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.

  • Profile Image
    EltonCris
    Answered on October 29, 2015 at 07: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.