Adjustments to Form Fields to Style Column and Width

I can get the form to do what I am wanting.

1) I want all the fields to go to a single column in iphone view.

2) I want the field widths to be wider initially.  There is a big gap between the the fields when they are in 2 column.  So the spaciing between fields on the same row.

http://form.jotformpro.com/form/52378302940959

To my understanding you are attempting to restyle your form so that it displays in a single column on mobile and with the field widths initially wider.

Are you just using the form link or are you going to embed it?

I would first start by recommending that you have Mobile Responsive enabled since this will make it responsive with wide fields in a single column in the requested manner on your mobile device.

As for your width adjustments I noticed on desktop you have the big gap. Is that what you wanted to remove? Or? Please confirm or correct me so that we can assist you better with this.

Hello!

1) I want it to be responsive. The submit button goes to 100% width in mobile. I want the other fields to do that also and for them to be a single column.

2) In desktop I want them to be in 2 columns.

3)  I dont want that gap you showed. I was trying to get the column widths to be wider for both columns but cant get it.?  Also the number fields are responding differently then the text field so it makes it hard for me to format.

4)  I am wanting to do something similar to this page:  http://demo.themestreet.net/launch27/index4.html

5) I am not sure which "responsive form" checkbox to use. There is one under preferences and another under the designer tab.

So not sure what form I need to embed. I want it to embed it on a webpage. Thanks!

Also, your reply form flows over your submit button so I could not submit this in one piece. Had to edit.  FYI

Hi,

I cloned your form for testing and demo purposes, is this perhaps the styling that you would like to do: http://form.jotformpro.com/form/52384815259968?. You can try viewing it on a mobile browser.

I first changed all of your fields into plain text boxes (not number fields). After that, I positioned them. I then enabled the mobile responsiveness on both Preferences and in the Form Designer tool.

I then used this custom CSS code to tell the browser that the styling that will be used is this one for desktop viewing:

@media screen and (min-width: 750px){

    .form-textbox {

        width : 100% !important;

    }

    .form-col-1, .form-col-3 {

        padding-left : 20% !important;

    }

}

The custom CSS code is placed under the CSS tab in the Form Designer Tool.

You can clone my cloned form to check it our, or use that instead if you want.

Let us know if that works for you.