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

    Can I customize how the responsive design reacts to screen size?

    Asked by iranscam on August 01, 2016 at 12:15 PM

    The mobile responsiveness widget works wonderfully for the most part. However, I was wondering if there was a way to edit certain properties when it breaks after a certain point? 

    For example, after a certain point, the input boxes switch to 100% width when I'd like them to be constrained with a max-width of 80%. Also, I have the labels aligned to auto, which looks great in the desktop view as they float out to the left of the text boxes. But when I break into the smaller views, these labels float above the boxes, which is fine, but they're aligned left-of-center when I'd like them to be centered above the text fields. 

    Furthermore, I'm using IFrame to get the form to function within my site's framework. Is there a way to achieve these things without having to screw around with the source code? If I plug the source code into my html, a million issues pop up.

    Thanks!

    Screenshot
    size how screen size can
  • Profile Image
    JotForm Support

    Answered by BJoanna on August 01, 2016 at 01:55 PM

    You can achieve that by Injecting Custom CSS code to your form. Add this CSS code to your form:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

        .form-all .form-textbox, .form-textarea {

            max-width : 80%!important;

        }

        .form-label.form-label-left {

        font-family : Roboto;

        text-align : center!important;

        position : relative;

        left:0!important;

    }

    }

    How to Inject Custom CSS Codes

     

    After you add mentioned CSS code you form should look like this on mobile devices.

    Here is my form where I added mentioned code: https://form.jotform.com/62135802609958 

    Feel free to clone it

    Hope this will help. Let us know if you need further assistance.