Form on Responsive on Mobile
- fillintheblanksjewelryAsked on February 28, 2017 at 02:35 AMThe form is displaying well on desktop. In mobile phones, the form shows fine when the screen is rotated. But it did not show properly on portrait screen. I tried following the instructions as what described here https://support.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm. It did not seem to work. The logo was still truncated. The 2 columns of the product list display became 1 column. The configurable list was also truncated.
Is it possible to make the form display properly on mobile the same way as it is shown on desktop? - JotForm SupportNik_CAnswered on February 28, 2017 at 06:02 AM
Hello,
I added the below CSS code to your form:
@media only screen and (max-width: 375px) {
span.form-product-item {
width: 350px!important;
}
img.header-logo-left {
width: 275px!important;
}
}
Also, I added a mobile responsive widget to your form.
Please check and let us know if you need further adjustments so we can assist you.
Thank you!
- JotForm SupportjonathanAnswered on February 28, 2017 at 10:14 PM
- fillintheblanksjewelryAnswered on March 09, 2017 at 08:45 AMHi
Thank you, the logo is displaying properly now.
However, the product list was still showing in 1 column and the "Let's
customize" configuration list field was still truncated.
When I rotate the mobile to landscape screen, similar display happened.
This was not happening before. The landscape screen was displaying
properly.
Please help.
Thanks in advance!
... - fillintheblanksjewelryAnswered on March 09, 2017 at 08:46 AMHi
Thank you, the logo is displaying properly now.
However, the product list was still showing in 1 column and the "Let's
customize" configuration list field was still truncated.
When I rotate the mobile to landscape screen, similar display happened.
This was not happening before. The landscape screen was displaying
properly.
Please help.
Thanks in advance!
... - fillintheblanksjewelryAnswered on March 09, 2017 at 09:16 AMHi guys,
Any updates? Is it possible to show 2 columns of products and configuration list on mobile?
Thanks.
... - JotForm SupportNik_CAnswered on March 09, 2017 at 10:37 AM
Hello,
Sorry for the late response.
I'm not sure how that would look like on a phone, because of the images, it might happen that the products will be a bit off the screen on a phone.
I'll check if it is possible to align in that way. Will get back to you.
Thank you!
- JotForm SupportNik_CAnswered on March 11, 2017 at 07:19 PMThank you very much for your patience.Please try to copy and paste the below CSS code in your Custom CSS Field:@media only screenand (min-device-width : 375px)and (max-device-width : 667px)and (orientation : portrait){img.form-product-image-with-options{width:60px!important;height:60px!important;}#cid_77{width:371px;}span.form-product-item{width:159px!important;height:95px!important;}#products{width:420px;}}I tested and this is how it shows (on iPhone):Here is my clone of your form: https://form.jotformpro.com/70694013559965Hope that is what you had in mind.Let us know how it worked.Thank you!