I need assistance with auto-resizing product images on a payment form for mobile devices

  • Profile Image
    tdorland
    Asked on October 25, 2020 at 10:52 AM

    Hello,

    I created a form with payment integration through stripe. It looks great on a desktop, but the product images are not being resized properly on a mobile device or a tablet. The settings are correct, but it is just not displaying correctly.


    Please see attached screenshare video for details.

    Here are the 3 forms where we are having the problem:

    https://www.jotform.com/build/202974632353154

    https://www.jotform.com/build/202983780070154

    https://www.jotform.com/build/202983887445168

    Please correct this.


    Thanks in advance,

    Terry

  • Profile Image
    ashwin_d
    Answered on October 25, 2020 at 01:29 PM

    Please inject the following custom CSS code in your form which should adjust the width of the product images and see if that solves your problem:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .image_area.form-product-image-with-options {

      width: 100px !important;

      height: 100px !important;

      min-width: 100px !important;

      min-height: 100px !important;

      margin-left: 25% !important;

    }

    }

    The following guide should help you how to inject custom CSS code in your form: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    Hope this helps.

    Do get back to us if the issue persists.