2 column question

I'm trying to create 2 columns, where the name, phone, and email is on the left side, while the comment box is on the right. See: https://form.jotform.com/53195949557978

However, I'm having trouble making the form look balanced. As you notice, there is a huge spacing between "Your Name" and "Phone Number". I cannot figure out how to fix this.

Please review the user guide as well.

user guide: http://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm

and you will need to add CSS code like this

I applied this update on your form http://www.jotformpro.com/form/53195949557978. Please check if its in accordance to your needs.

Let us know if you need further assistance.

Hi,

Thank you. However, I notice the form now looks terrible on mobile devices:

Thank you for very much for providing the screenshot and letting us know about it. I believe that the problem comes from the padding of 50 pixels that the form has on both its left and its right side.

We can actually override that with a small bit of CSS, so that when the form is viewed on a device with a narrow screen, there is no padding on the sides of the form. The custom CSS would be this:

@media only screen and (max-width: 640px) {
    .form-section {
        padding: 0px;
    }
}

You can add the custom CSS code by opening your form in the Designer, and pasting it into the textbox under the CSS tab. Please refer to images below for visual guidance:

Please let us know if this resolves the issue with the form on mobile devices, and also please do let us know if you need further assistance in getting the form tweaked to your liking. We will be happy to help.

Thank you for your quick reply. While that looks better now, is it not possible to display each field on it's own line (meaning the Comment box would be under Phone Number) when viewed on a mobile device?

Can you please share to us the URL of your website where you have embedded the form http://www.jotformpro.com/form/53195949557978

I test the form using its URL and it looks fine on mobile browser

If its embedded on a website, we will test it as well on the website page.

Thanks.

http://danehrenkrantzconsulting.com

Scroll down to the bottom. As you can see, part of the wording also gets cut off.

Hi,

I am currently checking your form. Will get back to you as soon as I find a fix.

Hi,

If you want each field to take one line, you can do so by moving the "Comment" field down and expanding all the fields. Please see below GIF.

Please note that this will also change the arrangement of fields in desktop view.

I noticed that the cut-off label is the "Comments/Questions". If you just want to fix the cut off words in mobile, there are 2 workarounds:

1. Make the wrapper of the form wider. You can add the ff. CSS to your website:

.section_wrapper.mcb-section-inner {

   max-width: 280px !important;

}

OR

2. Add space in between words of the label "Comments/Questions" (i.e. make it "Comments / Questions"). Please see below.

Do let us know if you need further assistance.