How to change style of form fields for Mobile Devices?

Hi,

I have checked your form in Android and iOs simulators. Please have a look at the following images.

You can change the width of "Qtde" dropdown menu for mobile devices by injecting some custom CSS into your form.

Please follow the steps below:

#1-Copy following custom CSS code.

@media only screen and (max-device-width: 480px) {
                    span.form-sub-label-container{width:40px;}
    }

#2- Paste this code Design>Inject CSS.

You can follow the guide below about how to inject Custom CSS Code into your form.

How-to-Inject-Custom-CSS-Codes

Finally, your form will be in the following images on mobile:

If you want to learn more about @media query, you can have a look at this website:  @Media Rules

Basically, @media provides to style your form for mobile devices.

@media only screen and (max-device-width: 480px) {
                    span.form-sub-label-container{width:40px;}
    }

480px is the max limit of the mobile device screen.

  span.form-sub-label-container points your "Qtde". Please have a look at the below instruction about how to find this pointer (or field CSS name) in your form:

#1- First, open your form on a browser. Click right on the form in browser and "Inspect". Click Arrow icon as you can see in the below image:

#2- After that, please follow the steps in the below image: 

If you need any further assistance, please feel free to let us know.

Thank you.