Inject CSS into Payment form with pictures

  • Profile Image
    rickvv
    Asked on September 13, 2013 at 10:09 PM

    I read about injecting CSS into the form, and I sort of see how that works.

    http://form.jotformpro.com/form/32476900731958

    I have an order form with three pictures, linked with an URL. The thumbnails here on jotform constrains the images, and they look squashed.

    I did put in the css code from one of the examples, but it only applies to the first item in the payment wizard form.

    I'm not sure how to get the CSS to apply to all the images (they're all a little taller than they are wide).

    Is there a demo or tutorial for this kind of customization?
    Thanks!

    rickvv

  • Profile Image
    EltonCris
    Answered on September 13, 2013 at 11:14 PM

    Hi,

    You can use .form-product-image class to target all product images.

    Example:

    .form-product-image{

    width:100px !important;

    height:100px !important;

    }

    Here's a visual guide on how to get field class and ID using Chrome Browser -> Inspect Element.

    Hope this helps. Feel free to message us should you have further questions. Regards!

  • Profile Image
    rickvv
    Answered on September 18, 2013 at 08:41 PM

    Well, I think I see that, but when I enter that code, it only applies to the first image in the PaymentForm (I cna change it to 60px height, 50px width, and it displays as in this form here:

    http://form.jotformpro.com/form/32476900731958

    I'm confused...

    Thanks,

    rick

  • Profile Image
    Cesar
    Answered on September 18, 2013 at 09:38 PM

    Hello Rick,
    Kindly add the form-product-image-with-options class to the injected code, like so:
     
    .form-product-image,.form-product-image-with-options {
    width:100px !important;
    height:100px !important;
    }

    Kindly let us know if you need further assistance. Thank you.