-
tester2017Asked on June 15, 2017 at 1:41 AM
Hi,
I'm trying to make my form mobile responsive, however I can't seem to find the tick box in the designer to make the form responsive.
Please help!
Thank you,
Debbie
-
WilliamRReplied on June 15, 2017 at 1:51 AM
By default, the forms supports mobile device browsers. If this is not the case on your end, the please try adding a Mobile Responsive Widget on your form and see it helps?
Let us know if you need further assistance.
-
tester2017Replied on June 15, 2017 at 4:25 AM
Thanks for your reply.
my form is embedded on a webpage and it is no mobile responsive.
Thanks,
Debbie
-
JanReplied on June 15, 2017 at 4:55 AM
May I know what form are you referring to? I checked the stand-alone version of your forms and I can see that they are mobile responsive.
Please try to re-embed the form using the iFrame method. Here's a guide: https://www.jotform.com/help/148-Getting-the-form-iFrame-code.
If the issue persists, let us know. Also, please provide the URL of your web page where the form is embedded so that we can further check.
Thank you.
-
tester2017Replied on June 15, 2017 at 9:25 AM
I wonder if it could be because of the CSS code that is preventing the forms to be mobile responsive?
Also, here's the url to the webpage:
https://www.uwcsea.edu.sg/Impact-of-Giving-Gala
It's under the "Buy Tickets" and "VIP Table" tabs.
-
David JotForm Support ManagerReplied on June 15, 2017 at 11:39 AM
Try injecting the following CSS code to make it mobile responsive:
@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
.form-input, .form-input-wide, .form-textarea, .form-textbox, .form-dropdown {
width: 100% !important;
}
}
Result:
Let us know if you need more help.
-
David JotForm Support ManagerReplied on June 15, 2017 at 11:42 AM
Inject the code as shown on this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
-
tester2017Replied on June 15, 2017 at 11:48 AM
Hi there,
Thanks for that. It looked like it worked great, however the credit card payment is still chopped off on the mobile device.
Debbie
-
tester2017Replied on June 15, 2017 at 11:51 AM
-
tester2017Replied on June 15, 2017 at 11:56 AM
As soon as I click on the Credit Card payment option, the form suddenly loses its mobile responsiveness.
Thank you for your time.
Debbie
-
David JotForm Support ManagerReplied on June 15, 2017 at 1:43 PM
After further testing, I figured out the that the problem is caused due to an injected CSS code, please remove the following code from your form:
#cid_24 label.form-sub-label:nth-child(2) {
width : 593px !important;
}
Example:
Let us know if you need more help.
-
tester2017Replied on June 15, 2017 at 8:22 PM
The reason why I included that code is because of the line, which is now next to "SGD". I wanted the line to be below the "Gala-Table" text box. Is there no other way of formatting the line or just remove it completely?
Thanks,
Debbie
-
David JotForm Support ManagerReplied on June 15, 2017 at 9:58 PM
Use this code instead:
#cid_24 hr{
width : 100% !important;
}
Let us know if you need more help.
-
tester2017Replied on June 15, 2017 at 10:39 PM
Perfect! Thank you so much for your prompt assistance!