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

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

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.