How prevent large space from appearing below a field on a small screen?

On a large screen, the Payment Method field (#input_241) on my X Boat Order form has little vertical space between it and the field below.  When the screen is about 900px, more vertical space appears, and when the screen is about 500px, even more appears.  Please tell me how to prevent excessive space from appearing below this field.  (See below.)

NOTE: There's a hidden text field (#input_255) just to the right of Payment Method that appears underneath the field when the screen is small and the conditions are met for it to be shown (Payment Method<> PayPal).

You may try this custom CSS

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

#label_281{
margin-top: -70px;
}

}

Let us know how it goes.

There is a conditionally shown text input field next to Payment Method. If I use your CSS code, this field, when shown, is overlaid by the field below it.

See images below and note that:

1.) When this conditionally shown text field is hidden because Payment Method is empty, an excessive amount of space appears below Payment Method on a smaller screen.  It's fine unless the screen is less than about 900px.  It gets even worse when the screen is smaller than about 500px.  I do not have media query code at those points, so they are Jotform breakpoints.

2.) When the text field is hidden because Payment Method indicates to use PayPal, the spacing is good even at the smallest screen size.

3.) When the text field is shown because Payment Method is filled with something other than PayPal, the spacing is again good.

It's alarming that situation 1 and 2 above have different results.  This seems to be an issue with Jotform's handling of hidden fields.  Whatever the cause, I'd appreciate some CSS to lessen the problem spacing if not fix it entirely.

Situation #1

Situation #2

Situation #3

It seems the issue is the field beside your Payment method field.

I tired to check for the use of the field however, I'm not sure with the condition.

Removing the field does fixe the issue with your form.

Here is a screen cast on my cloned form.

 If you read my posts above, you'll learn when the text field beside Payment Method is shown.  I even included a pictures of it when shown.  I do not want to remove it. 

Jotform should not leave space for a hidden field when it's hidden.  It doesn't do it on a large screen and it should not do it on a small screen either.  Jotform either needs to fix this functionality or give me CSS code to improve the appearance despite the problem.

Please advise. Thanks.

Could you please try using this custom CSS code to the form:

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

#cid_255 {

    display:block!important;

}

}

I also suggest that instead of using a Long Entry Text as a message prompt, please replace it with a TEXT field and see if it makes any difference.

Your code did not work. 

I have eight forms that deal with Payment Method and a conditionally shown Long Entry Text field (with varying content) this way.  I'd have to replace the latter field with three text fields and change several condition statements on each form.  Are you sure that using hidden Text fields instead of a Long ENtry Text field next to Payment Method will not cause the unwanted vertical space on small screens?

If it will work properly, I will either make the changes or tolerate the space.  In any event, this appears to be a bug in Jotform code. I hope you will relay this issue to your developers to address.

Please try changing the condition below

to the following and see if that helps.

Please get back to us if you need any further assistance. We will be happy to help. 

Brilliant!  That works!  I was wrong.  It wasn't a Jotform bug.  I didn't realize that I was showing the empty text entry field.  My bad!

Thanks a million!