-
henryclarke10Asked on April 4, 2017 at 3:47 PM
Hello. We have a form on this page:
http://henryclarkewebdesign.com/a-new-site-services/websites/mobile-friendly-responsive-websites/
I've checked "make this form responsive."
But the form is not fitting in a narrow phone screen. See: https://www.screencast.com/t/YSWwpzBR
Let me know what we need to do. Thanks for your help.
-
Kiran Support Team LeadReplied on April 4, 2017 at 7:31 PM
Please try injecting the following CSS code to the form so that it should be displaying correctly on the mobile devices.
@media screen and (min-width: 10px) and (max-width: 540px){
.jotform-form {
padding: 10px 0 !important;
}
.form-all {
width: 95%;
}
}
Please get back to us if you need any further assistance. We will be happy to help.
-
henryclarke10Replied on April 5, 2017 at 3:31 PM
Thanks Kiran.
I added the CSS and the form still looks the same as before. I tried editing the max-width and width with no success. I cleared the cache as well.
Let me know if you have another edit.
Thanks again.
-
Kiran Support Team LeadReplied on April 5, 2017 at 4:52 PM
I have checked the web page on a mobile emulator and see that the form is displaying without any issues.
Could you let us know which mobile you are using so that we'll try to replicate the issue at our end and provide you with necessary assistance.
Thanks!
-
henryclarke10Replied on April 6, 2017 at 7:58 AM
I tested it on a live iPhone 5s. I checked it on a Samsung and all was well.
-
Ashwin JotForm SupportReplied on April 6, 2017 at 8:48 AM
Hello henryclarke10,
Please inject the following custom css code and see if that solves your problem:
@media screen and (min-width: 10px) and (max-width: 540px){
.supernova .form-all, .form-all {
margin-left: opx !important;
margin-right: 0px !important;
}
.form-all {
width: 95%;
}
}
Do get back to us if the issue persists.
Thank you!