-
prpalaskaAsked on May 21, 2014 at 11:25 PM
-
Elton Support Team LeadReplied on May 22, 2014 at 3:13 AM
Hi,
Add the following CSS codes to your form, this will make the form text box and submit button responsive when viewed on small screen devices. Guide: How-to-Inject-Custom-CSS-Codes
@media only screen and (max-width: 468px) {
.form-input, .form-textbox, .form-submit-button {
width: 100% !important;
}
}
Apparently, your form container isn't positioning well on mobile as of checking resulting the form not to render properly on mobile so I would suggest checking that on your end since that's way out of our scope.
Feel free to let us know here should you need any further assistance. We'd be glad to help.
Regards!
-
prpalaskaReplied on May 22, 2014 at 9:09 PM
Can we add CSS for this http://awesomescreenshot.com/0752uop1e5? So it will scale down as I squeze website? + May be font & fields scale down proportionaly too?
-
CesarReplied on May 22, 2014 at 10:53 PM
You certainly are able to scale down a form by adding CSS code to it. For more information on performing this type of customization, kindly review the guides below.
Thank you.
Related Guides:
-
prpalaskaReplied on May 23, 2014 at 1:36 PM
Which code should I use?
-
TitusNReplied on May 23, 2014 at 4:10 PM
Using the shared guiides, please try the following CSS code:
@media only screen and (max-width: 468px) {
.form-input, .form-textbox, .form-submit-button {
width: 100% !important;
}
}You may want to create a test page on your website so that we can check the result and advice further if there are some anomalies.
Looking forward to your response.
-
prpalaskaReplied on May 23, 2014 at 5:22 PM
I added this code after EltonCris replied.
-
prpalaskaReplied on May 23, 2014 at 5:23 PM
http://awesomescreenshot.com/0752uop1e5 how can I scale down space & text fields?
-
jonathanReplied on May 23, 2014 at 6:48 PM
Hi,
You can also adjust the question vertical spacing of fields and as well us the form width using the form builder.
For question spacing check this user guide
-How-to-Reduce-Vertical-Spacing-between-Fields
For the form width, this guide
http://www.jotform.com/help/35-The-Importance-of-Form-Widths
You can also adjust the inected CSS code value for the max-width
Example, if this was the CSS code
@media only screen and (max-width: 468px) {
.form-input, .form-textbox, .form-submit-button {
width: 100% !important;
}
}
adjust it to
@media only screen and (max-width: 420px) {
.form-input, .form-textbox, .form-submit-button {
width: 100% !important;
}
}
to make the width narrower.
Hope this help. Inform us if you need further assistance.
Thanks.
-
prpalaskaReplied on May 23, 2014 at 8:20 PM
I made changes, but still got problems. IF I scale down website I am getting this http://awesomescreenshot.com/0e72uwjif2. Is it possible to scale font & text fields down?
-
Welvin Support Team LeadReplied on May 24, 2014 at 1:12 AM
Scale down to what percent? I'm not able to replicate that using Chrome v35 and FF v29. Scaling the browser to any percentage doesn't hide some part of the form. For example:
Google Chrome: https://shots.jotform.com/welvin/ss/05-24-2014-056hdi7i65.png
Mozilla Firefox: https://shots.jotform.com/welvin/ss/05-24-2014-i75rds3scd.png
Is there any way you could check it using an actual mobile device? This way, we'll know on how that looks like to your end and so we can help further in adding the adjustments.
Thanks