My images are not showing up as the same size when viewed on a mobile device

  • Profile Image
    rickswenson2
    Asked on March 07, 2021 at 09:16 PM

    I have created a form with images, a pair of images.....one the front picture, the 2nd the back of the picture. In the mobile phone view, when I click on the front issue to show the back one, the image is ridiculously small, in a new window, almost can't be seen.

    How can we make the 2nd image as large as the first on the mobile view ?

  • Profile Image
    Sam_G
    Answered on March 08, 2021 at 04:58 AM

    Hi Rickswenson2,

    I have checked your form and are you referring to the zoom of the picture?

    1615197409_6045f4e1494ff_3.8 picture.gif

    You can make the product images bigger by injecting this CSS codes to your form.

    .form-product-item img {

      height: 100px;

      width: 100px;

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    If you also want the product images to be zoom in when clicked, add this widget to your form. http://widgets.jotform.com/widget/product_lightbox

    Let us know if you need further assistance.

  • Profile Image
    rickswenson2
    Answered on March 08, 2021 at 02:44 PM
    Thank you for replying... but i still have issues.
    I addrd the css code but it does not seem to do anything to my mobile
    presentation.
    Also the widgit zoom address went to a 494 site nessage. Please help ne
    again . Thanjs
    ...
  • Profile Image
    Katherine_W
    Answered on March 08, 2021 at 07:47 PM

    Hi there,

    Happy to help!

    I made a clone of your form 210646682015149 and viewed it on my iPhone and am able to see that the images still look the same. If you inject the following CSS does the issue persist?

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

    .form-product-image-with-options {

      width: auto !important; 

      height: auto !important; 

    }

    #preview

    {

      width:100% !important;

    }

    }


    In regards to the address widget: I'm afraid that I am not seeing where this is on your form. Could you kindly upload a screenshot of the error you are seeing in this widget to our thread here? Here's how-to-add-screenshots-images-to-questions-to-the-support-forum

    We await your response.