Line up fields into 2 columns

Hi-

I am trying to line up 2 fields side by side. Left column will be the photo capture widget and the second column would have the file upload. The problem I'm experiencing is an impossible game of Tetris. Some fields line up correctly and some will not allow me to move to the correct row and/or wrong side.

Please help! Thanks!

You can resolve the issue by enabling the "MOVE TO NEW LINE" option of the preceding field.

Here's how: GUIDE: Form-Field-Positioning 

Hello-

That didn't help, but I did learn that the file upload widget allows to take a photo from mobile device. So, that will do the job.

If you can help with one more item regarding this format, how can I make the two columns mobile responsive? I'm guess it's some CSS injection?

Thanks for your help on this.

Hey there,

Happy to help you today.

Can you please send a screenshot of the columns you are referring to so we can check this for you?

Here is how you can attach a screenshot on our support forum

https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

Looking forward to your reply.

Thanks.

Hi-

(1) Here is the screen shot of the form. I would like to make mobile optimized to have same 2 columns. The form url: https://hipaa.jotform.com/ReLivePT/relive-pt-documents-uploader

(2) Additional question; I upload buttons have a shadow/outline around text. I went into advanced designer and unable to modify the stye/appearance. Can you help so it's just normal style text without the outline?

Thank you very much!

Greetings and thank you for your message.

Please allow us some time to prepare the CSS for you. As soon as we have more information for you, we will let you know.

Thank you for your patience. 

Greetings and thank you for your patience.

Please add the following CSS code to your form:

@media only screen and (max-width: 600px) {
  .form-line[data-type="control_fileupload"] {
    display: block;
    width: 100%;
  }
}
.qq-upload-button {
  text-shadow: none;
}

It should show upload buttons in one row on phones, and it will disable all shadows. You can click here to see how to inject CSS into your form.

Let us know if this solution works for you. 

Thanks for the response. The shadow has been eliminated - perfect! :)

I am still experiencing the upload fields on separate rows on my mobile device as well as when previewing form as "phone" option. Screen shot attached.

Please try adding this custom CSS code to your form:

.qq-upload-button {

    width: 130px!important;

}

id_91, #id_89, #id_92 {

    float: right;

    margin-top: -109px;

    margin-right: -185px;

}

#label_89, #label_90, #label_87,#label_87,#label_85,#label_91,#label_93  {

    font-size: 11.5px!important;

}

This is how it will look like: