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

    Mobile responsive not working

    Asked by zapin on January 13, 2017 at 02:43 PM

    I tried to make my page mobile responsive, and it was working for a bit, but now it doesn`t work anymore. Some of the pictures aren`t shown on mobile units, and prices and rows are all messed up in the order it stands in. On pc everything is fine.

    It seems it`s "only" in the section with my products it doesn`t make it responsive, rest of the form seems to be ok on mobile devices also, and in the beginning it was working ok with my products too.

    I tried using mobile responsive app, and I used the function in "advanced design" to make it responsive, but it didn`t help.

    I hope you can help me with my problem.

     

    Page URL:
    https://form.jotformeu.com/53545513278358

  • Profile Image
    JotForm Support

    Answered by BJoanna on January 13, 2017 at 06:58 PM

    I have tested your form on my Samsung Galaxy S4 and it seems that only header image is not responsive.

    To make it responsive add this CSS code to your form:

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

    img.header-logo-left {

    width : 280px !important;

    }.header-logo-left {

    width : 280px !important;

    }}

    How to Inject Custom CSS Codes

    Here is my cloned form with mentioned CSS code: https://www.jotformpro.com/form/70126883968974 

    Feel free to test it and clone it

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

  • Profile Image
    JotForm Support

    Answered by BJoanna on January 13, 2017 at 07:08 PM

    I just noticed that prices are also not shown. 

    To correct this add this CSS code as well:

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

    .form-product-details b {

        margin : 16px;

    }   

    }

    Let us know if you need further assistance.

  • Profile Image

    Answered by zapin on January 13, 2017 at 10:28 PM

    Thank you very much for your help. I added both of the CSS code to my form, and it does the trick :)

    But on my phone, a Samsung galaxy s7 edge, I can`t get the prices to stand beneath eachother in the same row. It would make it much more proffesionel to look at if I could make this happen, so my question is, is that possible to do ? On pc the prices are below eachother, it`s only on mobile device it`s not.

     

  • Profile Image
    JotForm Support

    Answered by BJoanna on January 14, 2017 at 08:21 AM

    To align prices on mobile devices, please add this CSS code as well to your form:

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

         .form-product-details b {

            float : right;

        }

        .form-pagebreak-back, .form-pagebreak-next, .form-product-item.hover-product-item {

        width: 95%!important;

    }

    }

    After that prices should look like this on your phone.

    Here is my new form: https://www.jotformpro.com/form/70133942634958 

    Feel free to test it and clone it.

    Let us know if you need further assistance. 

  • Profile Image

    Answered by zapin on January 14, 2017 at 08:35 AM

    Thank you so much. Problem solved. 

    Thank you for a really great product and a REALLY great and fast support.

  • Profile Image
    JotForm Support

    Answered by BJoanna on January 14, 2017 at 09:46 AM

    You're welcome. Also thank you for your kind words.

    Feel free to contact us if you have any other questions or issues.