Classic Form embedded: How to reduce the space after the page break buttons?

The other issue I'm having is aligning the back button with the submit button. I have them aligned, but there is too much space between the bottom of the form and the buttons. I believe the submit button is being forced to the back button's line when it should be the other way around.

May you please provide us the link of the page where the form has been embedded on? 

We will be happy to check that out and provide a workaround. 

Thanks. 

I hid the back button since it was causing that big gap.
Sent from my iPhone
...

May you please confirm the issue is now resolved by hiding the back button? 

We will wait for your response. 

I had to hide the back button because when it is visible, the submit button was falling to the same line as the back button, which is too far from the form.

I used this, but instead of the Back button moving up next to the Submit button, the Submit button fell down to the Back button.

.form-all .form-submit-button {

    top: 88px;

    position: relative;

}

What is the form you're working on so we can take a look?

We'll wait for your response.

Thank you!

Vehicle Donation

Please add the following CSS to your form:

.form-all ul:nth-child(4) li.form-input-wide {

  position: relative;

  top: -94px;

  display: inline-block;

}

.form-all ul:nth-child(4) li.form-input-wide div {

  margin-right: 0;

}

#id_30 {

  position: relative;

  left: 80px;

}

Result:

Cloned Form: https://form.jotform.com/80744150263956

Everything looks great, except on a phone. Both portrait and landscape are messed up.

 

To fix the displaying on mobile devices, change the CSS that you copied before to this.

@media (min-width: 700px) {

.form-all ul:nth-child(4) li.form-input-wide {

  position: relative;

  top: -94px;

  display: inline-block;

}

.form-all ul:nth-child(4) li.form-input-wide div {

  margin-right: 0;

}

#id_30 {

  position: relative;

  left: 80px;

}

}

The form will look like this on smaller screens.

If you want the buttons next to each other on smaller screens as well, add this CSS in addition to that above.

@media (max-width: 699px) {

  #id_30 {

    width: 50%;

    padding: 0;

    margin-right: 0;

    margin-left: auto;

    position: relative;

    z-index: 999;

  }

  .form-all ul:nth-child(4) li.form-input-wide {

    position: relative;

    top: -53px;

  }

  #input_30 {

    height: 41px;

    line-height: 41px;

    padding: 0;

  }

}

This is how the form looks with the extra CSS.