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

  • Profile Image
    spsubang
    Asked on December 10, 2020 at 04:47 AM

    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

  • Profile Image
    spsubang
    Answered on December 10, 2020 at 05:02 AM

    1607594517_5fd1f2154cf62_Zoomed in Photo

    Zoomed in photo


    1607594544_5fd1f2300da80_Design.png

    Design looks fine

  • Profile Image
    Jed_C
    Answered on December 10, 2020 at 05:26 AM

    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.

    1607595863_5fd1f75793f9a_thumbnail.gif

    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.

  • Profile Image
    spsubang
    Answered on December 10, 2020 at 08:40 AM

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

    https://form.jotform.com/203092283833050

  • Profile Image
    Jovanne_A
    Answered on December 10, 2020 at 09:23 AM

    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.

  • Profile Image
    spsubang
    Answered on December 10, 2020 at 09:50 AM

    Jovanne_A


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

  • Profile Image
    spsubang
    Answered on December 10, 2020 at 10:03 AM

    How about this?

    Issue 2:

    Current:

    1607612496_5fd23850dc9f4_wrong title.png


    How do it turn it to this?

    Bold title and separate title and description of item 1607612392_5fd237e8f1501_Font.png

    Issue 3:

    Also the TOTAL amount is at the wrong place


    1607612549_5fd2388516203_Wrong Total.png


    Correct placement of total:


    1607612592_5fd238b101148_right total.png


    Could you provide me the custom CSS codes as well?

    Thank you!

  • Profile Image
    ashwin_d
    Answered on December 10, 2020 at 10:54 AM

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

  • Profile Image
    ashwin_d
    Answered on December 10, 2020 at 11:09 AM

    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.

  • Profile Image
    spsubang
    Answered on December 10, 2020 at 11:13 AM

    Thank you Ashwin! It works!