How to put input fileds in column instead in row in mobile browser

Hello!

I love this widget and I'm using it for a dinner subscription.

But fields in raw are not responsive for mobile.

Can you help me?

Thanks in advance

Simone

You can refer to this user guide also. 

User guide: https://www.jotform.com/help/311-How-to-make-forms-mobile-responsive

You should also add the Mobile Responsive widget on your form.

Ex:

result:

 

Let us know if you need further assistance.

 

Hello Jonathan,

thank you very much for answering so rapidly.

I think the problem is related to the widget called "Configurable list"

If you click on radio button "si" (yes) option ("vuoi iscrivere altri partecipanti"), you will see that in a normal web page all 4 fields (in 4 different columns) are visible, but on mobile phone it's not the same.

Example below:

Could you help me a little bit more?

Thanks in advance!

Simone

Hi Simone,

Can you also test my test form https://www.jotform.com/70356255452960 on your mobile browser. 

When I test nn my mobile browser, the configurable list widget was responsive as intended.

screenshot:

 

Let us know how it goes.

I've tested your link, in works with iphone 6 (safari), but not with samsung s5 (chrome and built-in browser).

I've tested your link, in works with iphone 6 (safari), but not with samsung s5 (chrome and built-in browser). 😡

Please add the following code to CSS of the Configuration list

 

 

 

tr {

     height: 150px!important;

}

 

#list > tbody > tr:first-child {

    display: none;

}

 

td.col1:before {

content: "Nome ";

display: block;

}

 

td.col2:before {

content: "Cognome ";

display: block;

}

 

td.col3:before {

content: "E-mail";

display: block;

}

 

td.col4:before {

content: "Intolleranze ";

display: block;

}

 

.col1 {

float: left!important; 

left:20px!important;

position: relative;

}

.col2 {

float: left!important; 

left:20px!important;

position: relative;

}

 

.col3 {

float: left!important; 

left:20px!important;

position: relative;

}

 

 

.col4 {

float: left!important; 

left:20px!important;

position: relative;

}

 

This is how it should look after applying the code.

 

You can clone the form from : https://form.jotform.com/70358492519969

Hope this helps.