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

  • rickswenson2
    Asked on March 7, 2021 at 9: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 ?

  • Sam_G
    Replied on March 8, 2021 at 4:58 AM

    Hi Rickswenson2,

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

    1615197409 6045f4e1494ff 3 Screenshot 10

    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.

  • rickswenson2
    Replied on March 8, 2021 at 2: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
    ...
  • Kat JotForm Support
    Replied on March 8, 2021 at 7: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.