Can't make my images mobile responsive?

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

  • Profile Image
    Charlie
    Answered 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
    bbrmusicgroup
    Answered 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
    Charlie
    Answered 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.