How to make form cover image fit mobile device screen?

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! 

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

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.

 

 

 

 

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

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.

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.