What can I do to stop small 100 X 100 pixel images from appearing too big on phones (like Android)?

  • Profile Image
    Tankeroni
    Asked on June 26, 2016 at 07:42 PM

    Hi - my images are 100 x 100, and in my form, under Edit Properties, they are 100 x 100 as well.  Yet when I view the form on my phone, these images are gigantic and blurry (because they have obviously been scaled up to fill in space).  How do I avoid this scaling and make it respect the settings and actual image size?


    Thanks in advance.

  • Profile Image
    Chriistian
    Answered on June 26, 2016 at 09:40 PM

    You can inject the custom css code below to your form to prevent the images from scaling when viewed on mobile.

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

    #cid_37 img.form-image, #cid_94 img.form-image, #cid_96 img.form-image, #cid_112 img.form-image, #cid_136 img.form-image{

       width: 100px!important;

        height: 100px!important;

    }

    }

  • Profile Image
    Tankeroni
    Answered on June 26, 2016 at 10:14 PM

    Thanks - that fixed it if my phone is held vertically, but when I rotate my phone to view the form horizontally, the images are gigantic again.

  • Profile Image
    Chriistian
    Answered on June 26, 2016 at 11:36 PM

    You are most welcome. Please delete the yellow highlighted text on the top and bottom of the previous code provided.

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

    #cid_37 img.form-image, #cid_94 img.form-image, #cid_96 img.form-image, #cid_112 img.form-image, #cid_136 img.form-image{

       width: 100px!important;

        height: 100px!important;

    }

    }              

    This should keep the icons the same size whether the phone is vertical or horizontal.

  • Profile Image
    Tankeroni
    Answered on June 27, 2016 at 12:35 AM

    Thanks!  I see now how to custom things for different images as well.  I appreciate the great help.