-
BBC2016Asked on April 11, 2016 at 11:11 PM
I cant style my form and I am so frustrated with it :(
See attached screenshot I tried to make.
#1 - The following fields......last, security and expiration need lining up
#2 - Yellow line by the " / " line needs a space.
#3 The circled dash needs a space too on the RH side please.
-
Chriistian Jotform SupportReplied on April 12, 2016 at 3:28 AM
I see that you want to add some spaces to the credit card fields and the phone number. Allow me to investigate your form further and I will get back to you once I have the custom css that you can apply to your form.
Regards. -
Chriistian Jotform SupportReplied on April 12, 2016 at 3:41 AM
Here's the css that I injected to your form (https://www.jotform.com/61018466344151):
#cid_19 {
width: 200px;
}
#cid_19 .form-sub-label-container {
margin-right: 20px;
}
#cid_19 .form-sub-label-container:nth-of-type(2) {
width: 200px;
}
#cid_13 .form-sub-label-container {
width: 200px!important;
margin-right: 30px!important;
margin-left: 0px;
}
If you need further assistance, please let us know.
Regards. -
BBC2016Replied on April 12, 2016 at 4:10 AM
oh no! yes but the rest of my form got messed up - look at the top.
-
BBC2016Replied on April 12, 2016 at 4:14 AM
email and phone sections are al messed up now too!!!!! :( please help asap!!!!
-
Chriistian Jotform SupportReplied on April 12, 2016 at 4:57 AM
Apologies for the inconvenience. I have updated the code on your form to fix the issues. Here's the new css that I injected:
#cid_19 {
width: 200px;
}
#cid_19 .form-sub-label-container {
margin-right: 20px;
}
#cid_19 .form-sub-label-container:nth-of-type(2) {
width: 95px;
}
#cid_13 .form-sub-label-container {
width: 200px!important;
margin-right: 30px!important;
margin-left: 0px;
}
#cid_13 > span:before{
left: 425px !important;
}
Do let us know if you need to make further modifications.
Regards. -
BBC2016Replied on April 12, 2016 at 4:36 PM
what about the line? is it possible1 to
-
BenReplied on April 12, 2016 at 4:54 PM
If you add the following code:
input.form-textbox.cc_number {
margin-right: 10px;
}
.form-dropdown.cc_exp_month {
margin-right: 10px;
}next to the code given by my colleague, your form should look like this:
As you can see both dash - and slash / are now in the middle of the space between the fields and the same will be on your form once you add the CSS above.
Do let us know how it goes.
-
BBC2016Replied on April 13, 2016 at 12:42 AM
AMAZING! THANKS!!!!!!!!!!!!!!!
-
BBC2016Replied on April 13, 2016 at 12:44 AM
-
Chriistian Jotform SupportReplied on April 13, 2016 at 1:59 AM
I see that the previous issue has been resolved. To better assist you with your latest concern, I have moved your question about the line into a new thread. You can check out the thread by following this link: https://www.jotform.com/answers/817071
Regards.