I have having some styling issues that I can seem to fix. Can you help?

I'm having some major issues with this form on both desktop and mobile: https://form.jotform.com/63585155298165

DESKTOP: www.airtailor.com

1. "Phone Number" and "Zip Code" fields are not in line with the rest of the form

2. "Phone Number" and "Zip Code" fields are showing up in the wrong order (not a problem on mobile)

3. I am unable to remove the green shadow from the "SIGN UP FOR FREE NOW" button

MOBILE: www.airtailor.com

1. None of the fields are aligned on mobile

2. I am unable to remove the green shadow from the "SIGN UP FOR FREE NOW" button

Hello skinnyfatties,

I noticed that the Phone Number and Zip code fields are dependent on the above line. Meaning, they are at the lower part of the line because of the width of the form. As a result, the Phone number field uses the 3rd column class, while the Zip code uses 4th. I have adjusted them to be using 1st and 2nd columns. Now they are aligned properly.

For the other parts, I would like for you to insert this CSS code:

#input_2 {
 -moz-box-shadow:    0 0 0 0 !important;
 -webkit-box-shadow:  0 0 0 0 !important;
 box-shadow:          0 0 0 0 !important;
}

@media screen and (min-width: 480px) {
  .form-col-1 {
  margin-left: 20px !important;  
  padding-left: 0 !important;
  width: 90% !important;
 }
}

@media screen and (max-width: 480px) { 

    .form-col-1 {
  margin-left: 20px !important;  
  padding-left: 0 !important;
  width: 90% !important;
 }
}

This should remove the green drop shadow below your submit button, and the your field alignments on the left. If you need to know how to inject CSS code into your form, please follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

If you have questions, please let us know.

Thanks.

Thanks for your response. It corrected most of the things, but now there are some new issues on the form (https://form.jotform.com/63585155298165).

The form fields are no longer in two columns, and they are not aligned on both desktop and mobile. Can you help?

I've fixed it. Can you check? I've changed the CSS to the following:

@media only screen and (max-device-width: 550px) {

.form-line-column.form-col-1, .form-line-column.form-col-2, .form-line {

    padding: 10px 36px !important;

}

}

Looks great on desktop, but on mobile, it looks like this. The fields are uneven. Any ideas on how to fix?

Hi,

I checked your form's direct link https://form.jotform.com/63585155298165 and the website http://airtailor.com/, but I'm unable to replicate the problem. Here's what I am seeing:

On my Android mobile device:

I also tried the direct link on an iPhone 6 Plus device:

I then visited your website and viewed it on an iPhone 6 Plus device:

May we know if you are still having problems? I also noticed your form is embedded on your website using the default embed script, you could try re-embedding the form using the iFrame embed code instead.

We'll wait for your response. 

I was shrinking my browser to see the mobile phone view, which is the wrong way to test that, sorry! It works great on the actual mobile phone. Thanks to everyone for your help!