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 make form cover image fit mobile device screen?

    Asked by KeyshaunSmith on July 02, 2016 at 06:25 PM

    The form does not fit a mobile device screen even with the "Mobile Responsive" widget.

    Here is the URL to my form: https://form.jotform.com/KeyshaunSmith/DramaCampSurvey

     

    If you notice the header does not fit. along with the 1-10 scale questions on the latter pages in the form.

     

    Any help would be greatly appreciated, thanks! 

    Page URL:
    https://form.jotform.com/KeyshaunSmith/DramaCampSurvey

    mobile device cover image
  • Profile Image
    JotForm Support

    Answered by jonathan on July 02, 2016 at 11:48 PM

    From what I see on your form https://www.jotform.us/form/60657589174166 it was the form cover image that is not being responsive on mobile browser.

     

    Let me check for the appropriate CSS codes that will fix this. I'll get back shortly

  • Profile Image
    JotForm Support

    Answered by jonathan on July 03, 2016 at 12:01 AM

    Please test my form https://form.jotform.com/61839158769979 on your mobile browser.

    I checked it on my end and I see it responding properly on mobile browser.

     

    --

    Try adding this CSS code on your form  https://www.jotform.us/form/60657589174166

     

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

     

    .form-all:before {

        content : "" !important;

        background-image : url("https://www.jotform.com/uploads/KeyshaunSmith/form_files/drama.jpg") !important;

        display : inline-block !important;

        height : 320px !important;

        position : absolute !important;

        background-size : 100% 100% !important;

        background-repeat : no-repeat !important;

        width : 100% !important;

    }

    }

     

    Let us know if this did not work.

     

     

     

     

  • Profile Image

    Answered by KeyshaunSmith on July 03, 2016 at 12:08 AM

    That fixed the issue with the cover image but not the 1-10 scale questions see below.

  • Profile Image
    JotForm Support

    Answered by jonathan on July 03, 2016 at 12:33 AM

    I apologize I did not see that issue as well. I see it now with the scale rating widget not being mobile browser responsive using your form https://www.jotform.us/form/60657589174166 

     

    Let me check how it can be fix as well. I'll be back shortly.

  • Profile Image
    JotForm Support

    Answered by jonathan on July 03, 2016 at 01:12 AM

    Please replace the CSS codes I suggested previously with this one

     

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

        .form-all:before {

            content : "" !important;

            background-image : url("https://www.jotform.com/uploads/KeyshaunSmith/form_files/drama.jpg") !important;

            display : inline-block !important;

            height : 320px !important;

            position : absolute !important;

            background-size : 100% 100% !important;

            background-repeat : no-repeat !important;

            width : 100% !important;

        }

    }

    .form-all {

        max-width : 690px;

    }

    .form-line, .form-input-wide {

        max-width : 690px;

        margin : 0 auto;

    }

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

        .form-all {

            max-width : 100% !important;

        }

        .form-line, .form-input-wide {

            max-width : 100%;

            margin : 0 auto;

        }

        .form-line {

            padding : 0px !important;

            text-align: left !important;

        }

    }

    it should make the scale rating field respond on mobile browser as well.

     

     

    Let us know if this did not work.