Image banner not mobile responsive

  • Profile Image
    LaRissaHolley
    Asked on February 22, 2017 at 05:49 PM

    Hi, 
    I have switched to V3 and added the mobile responsive widget to my form, but my banner image is still not mobile responsive. 
    Is there anything else I can do to make it responsive?

    Thanks!

  • Profile Image
    ashwin_d
    Answered on February 22, 2017 at 11:30 PM

    Hello LaRissaHolley,

    Please inject the following custom css code in your form and that should solve your problem:

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

    .form-header-group {

        background-image: url("https://www.jotform.com/uploads/LaRissaHolley/form_files/affiliatebannerhex.jpg");

        background-size: 305px 300px;

    }

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Do try it out and get back to us if the issue persists.

    Thank you!

  • Profile Image
    LaRissaHolley
    Answered on February 23, 2017 at 11:48 AM

    Hi! so that did make the image responsive, but it made it stretch/compress the image. Is it possible to maintain the same ratio for the image?

    Thanks again for your help! 

  • Profile Image
    ashwin_d
    Answered on February 23, 2017 at 12:59 PM

    Hello LaRissaHolley,

    You can change the value of "background-size: 305px 300px;" to change the height & width of the image.

    Thank you!