What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by aaronwbryant on November 21, 2015 at 08:16 AM
    I've got another question. What css can I use to increase the size of the product thumbnails?
    product images product lightbox image widget enlarge images increase dimensions retain aspect ratio not distort distorted images ret
  • Profile Image
    JotForm Support

    Answered by abajan 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

    Answered by aaronwbryant 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
    JotForm Support

    Answered by abajan 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
    JotForm Support

    Answered by abajan 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
    JotForm Support

    Answered by abajan 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.