Added CSS and it broke the product list

  • Profile Image
    bearmanager1
    Asked on February 25, 2021 at 02:58 PM

    Hi there,

    I was trying to increase the image size using the CSS code from this page:

    https://www.jotform.com/answers/655134-Enlarge-images-on-product-listing

    On this form:

    https://www.jotform.com/build/210395111460242

    When I did that, the single column option becomes more like a single, jumbled row.

    Removing the CSS does not solve the issue, neither does reverting to earlier versions.

    Two-column product list seems to be fine.

    Thanks in advance for your help,

    Justin

  • Profile Image
    Patrick_R
    Answered on February 26, 2021 at 12:39 AM

    Hello Justin! I don't see any custom CSS code on your form now. As you don't have the CSS code implemented on your form; to reset the layout to the default theme please change the form theme (as shown in the screencast below).

    http://shots.jotform.com/patrick/Screencast%202021-02-26%2011-02-11.webm

    Once reset, let us know what image size do you want for the product images on your form; we'll assist you accordingly.

    Thank you!

  • Profile Image
    Patrick_R
    Answered on February 26, 2021 at 09:12 AM

    Hello Justin! You can use the following CSS code to make changes to the product image sizes. Please use these instructions to add CSS code to your form.

    .form-line[data-payment="true"] .form-product-item .p_image .image_area{
     width: 180px;
     height: 150px;
    }

    Here is a form that has this code implemented: https://form.jotform.com/210563847458969

    You can make changes to the pixel size in this code as per your preference.

    I hope this helps. If you have any questions, let us know.

    Thank you!

  • Profile Image
    bearmanager1
    Answered on February 26, 2021 at 09:54 AM

    Hey Patrick,

    That's great - those image sizes look perfect, so I'll leave them as they are.

    I've got to say, the level of customer service you provide is outstanding! Thanks for getting back to me so quickly and resolving this issue.

    Have a great day,

    Justin