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

    Can't make my images mobile responsive?

    Asked by bbrmusicgroup on March 26, 2015 at 11:52 AM

    I have the settings on "Yes" for responsive form, but can't get the images to be responsive when I look on mobile. After reading through the forum, I've also added the mobile responsive widget, but that doesn't work either

    Page URL:
    http://form.jotformpro.com/form/50707140653954

  • Profile Image
    JotForm Support

    Answered by Charlie on March 26, 2015 at 01:33 PM

    Hi,

    I believe the images have a fixed size. To make them responsive, you will need to add @media rule to your CSS tab in Form Designer. Here's an example:

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

        div.header-logo > img {

            width : 360px !important;

        }

        .form-header-group.hasImage {

            width : 360px !important;

        }

    }

     

    For the other device display, you'll need to add another set of @media rules with a specific min and max width. Then for each device display you'll need to declare what the image size will be.

    Do let us know if you need more information on this.

    Thank you.

  • Profile Image

    Answered by bbrmusicgroup on March 26, 2015 at 01:41 PM

    I have an iPhone 5 - that made it better, but the images are still a little too wide

  • Profile Image
    JotForm Support

    Answered by Charlie on March 26, 2015 at 02:45 PM

    Hi,

    Could  you try using this code instead:

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

        img.header-logo-left {

            width : 280px !important;

        }

    }

    @media screen and (min-width: 401px) and (max-width: 600px){

        img.header-logo-left {

            width : 500px !important;

        }

    }

    @media screen and (min-width: 601px) and (max-width: 2400px){

        img.header-logo-left {

            width : 600px !important;

        }

    }

     

    Although, as I mentioned earlier, you can change the widths. The media rule just shows three kinds of display.

    I hope this one fits.

    Kind regards.