-
fillintheblanksjewelryAsked on February 28, 2017 at 2: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? -
Nik_CReplied on February 28, 2017 at 6: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!
-
DOAHLReplied on February 28, 2017 at 5:25 PM
-
jonathanReplied on February 28, 2017 at 10:14 PM
-
fillintheblanksjewelryReplied on March 9, 2017 at 8: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!
... -
fillintheblanksjewelryReplied on March 9, 2017 at 8: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!
... -
fillintheblanksjewelryReplied on March 9, 2017 at 9:16 AMHi guys,
Any updates? Is it possible to show 2 columns of products and configuration list on mobile?
Thanks.
... -
Nik_CReplied on March 9, 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!
-
Nik_CReplied on March 11, 2017 at 7: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!