Mobile view issues: remove extra space after calendar field, and set credit card fields of payment integration in the same line.

Hey JotForm team,

First of all, thank you so much for building JotForm. Your product is really great, and with all of your well-documented support I was able to solve a ton of small problems that I would never have figured out on my own. My team recently launched a page with this form, and it's looking great. I just have a couple little things that I wasn't able to figure out:

1. On the first page, we decided we didn't want the little calendar icon to show next to the date. I hid it by adding the below to the CSS, but now there's an extra line of space after that question. Any fix for that?

.showAutoCalendar {
   width : 0% !important;
   height : 0% !important;
}

2. On the second page, in the stripe integration, the credit card number, expiration date, and security take up twice as many lines as they need to and I haven't been able to figure out how to make them all appear smaller.

Screenshots are attached which (i think) show everything I'm talking about. Thanks so much for the help! Looking forward to nailing down the last couple details of this project. We already have our clients ordering with the form and the feedback has been great.

Best,
Chris, CUPS

I checked your form in my laptop, and it looks fine, I see the issue only reproduces on mobile view. I will be glad to assist you with the mobile issues(first two) on this thread. 

1) On regards of the extra line of space, please remove the code you added, and paste this one instead: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

.showAutoCalendar {

      display: none !important;

}

2) On regards of the credit card issue, please inject the following code:

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

#id_39 table.form-address-table tr:first-child +tr+tr td:first-child span:first-child input{

    width: 160px !important;

}

#id_39 table.form-address-table tr:first-child +tr+tr td:first-child span:first-child {

    width: 170px !important;

}

#id_39 table.form-address-table tr:first-child +tr+tr td:first-child span:last-child {

    width: 85px !important;

}

#sublabel_cc_ccv{

    width: 105px !important;

}

}

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

#id_39 table.form-address-table tr:first-child +tr+tr+tr td:first-child span:first-child select{

    width: 160px !important;

}

#id_39 table.form-address-table tr:first-child +tr+tr+tr td:first-child span:first-child {

    width: 170px !important;

}

#id_39 table.form-address-table tr:first-child +tr+tr+tr td:first-child span:last-child {

    width: 85px !important;

}

#sublabel_cc_ccv{

    width: 105px !important;

}

}

Result:

3) Your third question will be addressed on a separate thread here: https://www.jotform.com/answers/1090629 

Let us know if you need anything else.

Thanks for your reply - this fixed the mobile form, but not the desktop version. See screenshot.

I have fixed that already in your form just by decreasing the width of the following lines of code:

#id_39 table.form-address-table tr:first-child +tr+tr td:first-child span:first-child input{

    width: 125px !important;

}

#id_39 table.form-address-table tr:first-child +tr+tr td:first-child span:first-child {

    width: 135px !important;

}

#id_39 table.form-address-table tr:first-child +tr+tr+tr td:first-child span:first-child select{

    width: 125px !important;

}

#id_39 table.form-address-table tr:first-child +tr+tr+tr td:first-child span:first-child {

    width: 135px !important;

}

Please check your embedded form again:

Let us know if you need more help.