How Can I Enlarge Product Thumbnails While Retaining Their Aspect Ratio?

  • Profile Image
    aaronwbryant
    Asked on November 21, 2015 at 08:16 AM
  • Profile Image
    abajan
    Answered on November 21, 2015 at 08:30 AM

    As an alternative to increasing the size of the product thumbnails, we have a widget which displays each product in a lightbox when clicked, like in this demo. The widget is named Product Lightbox. Here's our guide on how to add widgets to your JotForms.

    Do inform us if we may help you with anything else JotForm related.

    Ciao for now and enjoy your weekend :)

  • Profile Image
    aaronwbryant
    Answered on November 21, 2015 at 11:42 AM

    I just want to permanently increase the size of the images. I got them to be larger but how do I make them proportionally larger so that they aren't distorted?

  • Profile Image
    abajan
    Answered on November 21, 2015 at 01:34 PM

    Let me see what's the best CSS I can come up with to achieve this and get back to you later today.

    Thanks

  • Profile Image
    abajan
    Answered on November 21, 2015 at 04:06 PM

    Hi again,

    It turns out that the solution is actually quite simple. Just changing part of the value of the last declaration in the last rule of the form's injected CSS, so that the rule becomes

    .form-product-image-with-options {
      width: 200px !important;
      height: auto !important;
    }

    will do the trick, as can be seen in this clone of your form. To simplify matters, just delete all of your form's injected CSS, copy this code to your computer clipboard and paste it in place of the deleted CSS.

    Cheers

  • Profile Image
    abajan
    Answered on November 21, 2015 at 04:31 PM

    UPDATE

    Neither the height declaration nor !important keyword is necessary. Just

    .form-product-image-with-options {
        width: 200px;
    }

    would suffice.