Enlarge images on product listing

  • laundrycare
    Asked on September 4, 2015 at 11:03 AM

    Is there any way to make the product images larger on this form:

     

    http://www.jotform.com//?formID=52425780501955

  • Charlie
    Replied on September 4, 2015 at 12:59 PM

    Hi,

    To confirm, you would like to make the images larger on the actual form? Or only when it is clicked and viewed?

    I cloned your form for testing and demo purposes, you can check it here: http://form.jotformpro.com/form/52464956562970? 

    I used this custom CSS code to make it larger, you can adjust the value of the width with your own preferences.

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

        width: 200px !important;

        height: auto !important;

    }

    You can add the CSS code under the CSS tab in your Form Designer Tool.

    Enlarge images on product listing Image 1 Screenshot 20

     

    Do let us know if you need further assistance on this.

  • laundrycare
    Replied on September 4, 2015 at 4:59 PM

    This is perfect - thank you!

  • jonathan
    Replied on September 4, 2015 at 5:29 PM

    On behalf of Charlie, you are quite welcome.

    If I may add, in case you are not aware, there is also a Product Lighbox Widget which enlarge the product image when clicked on.

    Enlarge images on product listing Image 1 Screenshot 20

     

    Here is a demo form you can try http://form.jotform.co/form/33604136500846?

    Feel free to contact us again anytime for any assistance you need on JotForm

  • Danielle
    Replied on September 9, 2015 at 12:50 PM

    Ok I have the cloned form but it appears that we used the incorrect payment widget for that particular form (my bad!). Can you make the images larger on this form:

    http://form.jotformpro.com/form/52436685576973

  • Charlie
    Replied on September 9, 2015 at 2:06 PM

    Hi,

    You can still use the previous CSS code that I shared earlier:

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

        width: 200px !important;

        height: auto !important;

    }

    But I went ahead and cloned your form and applied the CSS code directly there, here's the cloned form: http://form.jotformpro.com/form/52515205561953? 

    Let us know if you need more information on this.