How to make the image size automatically zoom and zoom out when viewed?

Hi team,

My photos are all zoomed it at display but when we click it, the photo looks fine.

How to fix this?

Sincerely, Jess

Zoomed in photo

Design looks fine

You'll have to create a smaller version of the image so that it will load it as thumbnail. The size that you will need to use is 205x147.

Here's how to show the thumbnail in the products.

The order is the smaller image will be the first in the images and the 2nd image would be the larger one. You can download the 205x147 image sample here http://shots.jotform.com/jed/img/2758035.jpg.

Try that and see if that works for you.

Thanks Jed but why is it that the first jotform turn out fine?

https://form.jotform.com/203092283833050

Hi there,

Kindly add this custom CSS code:

Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

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

  background-size: cover !important;

}

Please give it a try and let us know if this worked for you.

Jovanne_A

YOU ARE AMAZING. THANK YOU. IT IS FIXED NOW!

How about this?

Issue 2:

Current:

How do it turn it to this?

Bold title and separate title and description of item

Issue 3:

Also the TOTAL amount is at the wrong place

Correct placement of total:

Could you provide me the custom CSS codes as well?

Thank you!

I am working on your requirement and will get back to you on this soon.

Please inject the following custom CSS code in your form and see if that gives you the desired result:

.form-product-name {

  font-weight: bold !important;

  display: block !important;

}

.form-line.card-3col .payment_footer.new_ui {

  position: relative;

  display: block !important;

  width: 100%;

  margin-left: 90% !important;

}

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

Hope this helps.

Do get back to us if you have any questions.

Thank you Ashwin! It works!