Form on Responsive on Mobile

fillintheblanksjewelry

Asked on February 28, 2017 at 02:35 AM

The 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 Support

Nik_C

Answered 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!

DOAHL

Answered on February 28, 2017 at 05:25 PM

Hello,

the mobile responsive widget doesn't seem to be available when I search the widgets in the Form Elements. How do I install it?

JotForm Support

jonathan

Answered on February 28, 2017 at 10:14 PM

@DOAHL

We will resolve your concern here https://www.jotform.com/answers/1078713

Thanks.

fillintheblanksjewelry

Answered on March 09, 2017 at 08:45 AM

Hi
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!
...

fillintheblanksjewelry

Answered on March 09, 2017 at 08:46 AM

Hi
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!
...

fillintheblanksjewelry

Answered on March 09, 2017 at 09:16 AM

Hi guys,
Any updates? Is it possible to show 2 columns of products and configuration list on mobile?
Thanks.
...

JotForm Support

Nik_C

Answered 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 Support

Nik_C

Answered on March 11, 2017 at 07:19 PM

Thank you very much for your patience.

Please try to copy and paste the below CSS code in your Custom CSS Field:

@media only screen

and (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/70694013559965

Hope that is what you had in mind.

Let us know how it worked.

Thank you!