Responsive form product items quantity is not shown

Hello,

I'm trying to add the responsive feature to this form.  It's a wholesale order page so it has a password protection on it. the password is "bandana"

https://secure.jotformpro.com/form/52693164387970

when I try it out with your designer viewer the quantity input fields are cut off.  I should think they would wrap over an down under the product.

Can you take a look and see what can be done to make this functional down to 320 pixels wide?

Thanks!

I would like to first let you know that having a field that asks for "password" or "pass" is very likely to result in your form in being suspended, suspending your account alongside of it.

My suggestion is to change that into something else, like "ordering code" or something along those lines.

Now in regards to the quantity field.

The issue is caused by this rule:

br + br + span.form-sub-label-container

which can be fixed by applying the following code:

@media screen and (max-width:360px) and (min-width:321px)
{
  .form-product-item:nth-child(2) > span.form-sub-label-container,  .form-product-item:nth-child(20) > span.form-sub-label-container,  .form-product-item:nth-child(26) > span.form-sub-label-container {
    left: 39% !important;
 }
}
@media screen and (max-width:360px)
{
 span.form-product-item {
    width: 90%;
 }
 span.form-product-details {
    display: block;
    text-align: right;
 }
 .form-product-item > span.form-sub-label-container {
    left: 60% !important;
    margin-bottom: 20px;
    margin-top: -30px;
    position: relative !important;
 }
 .form-product-item:nth-child(20) > span.form-sub-label-container {
    left: 39% !important;
 }
}

Once you add it to your form, you should see the quantity field and the price on the right and under the label. The issue here is that some images are a bit bigger and some a bit smaller, which brings difficulties while creating CSS that makes all fields aligned in the same manner.

This is how it looks for me with the code above:

The CSS above should be added to your form by following these steps: Inject Custom CSS Codes

Do let us know how it goes.

thanks for the heads up on the password. It's now changed to "Fundraiser Ordering Code".

The CSS code works nicely for my 320 pixel devices but is needlessly tight for a larger screen. I was hoping for a form that would be reactive and would change to that smaller, tighter form only when needed.

ooopps!

my apologies it appears to do that very well.

Thanks!!

On behalf of my colleague, Ben, you are welcome. Please feel free to contact us again if you have any further questions.