What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to change style of form fields for Mobile Devices?

    Asked by PeterKell on December 11, 2016 at 02:50 PM
    Page URL:
    https://form.jotformz.com/63136160539656/app=&gt;http://app.vc/smokeyf<br/>ood

  • Profile Image
    JotForm Support

    Answered by olivia on December 11, 2016 at 04:13 PM

    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.