Position text area and submit button when device display is 750px?

2. Make each text area and the submit button jump to it's own row when the browser width is equal or less than 750 px

Hi,

Regarding your concern, not sure what you meant by jumping the text area and submit button, you can actually add custom CSS code in your Form Designer to position fields.

Here's a sample code that you can trigger specific styles depending on the media screen display:

@media only screen and (min-device-width : 320px)

and (max-device-width : 750px)

{

/* Styles */

}  

 

I hope this helps. Let us know if you need further assistance on this.

Thank you.

Thanks, that will, help a lot. So, do you sugest me to create a style for each text box that in widths higher than 750px will be e.g. 40% wide and on widths equal or smaller than 750px become 100% wide. Or how should I write the code?

Thanks again..!

Hi,

So, do you sugest me to create a style for each text box that in widths higher than 750px will be e.g. 40% wide and on widths equal or smaller than 750px become 100% wide.

This depends on what you would like it to be / look like. We can help you if you have some issues in getting it just the way you like, but I would suggest creating a design that you want to achieve which would tell you the size of the fields that you want/can have and their positions. However having that said, it is best for mobile devices to have their fields set to around 80-100% wide so that they are easier to click on and work with.

how should I write the code?

I took a look at your jotform: http://www.jotform.co/form/43357676732868

Since you have 2 fields on it and one submit button you can change the styles of the fields by adding these rules:

li.form-line[data-type="control_textbox"] {}
- This will change the CSS for the email and textbox fields

li.form-line[data-type="control_button"] {}
- This will change the styles for the Submit Button.

In combination with the code my colleague Charlie had given it would look like this:

@media only screen and (max-device-width : 750px)
{
  li.form-line[data-type="control_textbox"] { /* CSS style properties go here */ }
  li.form-line[data-type="control_button"] { /* CSS style properties go here */ }
} 

Do let us know how it goes for you and if you have any further questions.

Best Regards,
Ben