How to make form cover image fit mobile device screen?

  • Profile Image
    KeyshaunSmith
    Asked 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! 

  • Profile Image
    jonathan
    Answered 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
    jonathan
    Answered 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
    KeyshaunSmith
    Answered 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
    jonathan
    Answered 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
    jonathan
    Answered 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.