How to place the image on top of product description?

RE FORM: https://www.jotform.com/build/241837422304047

1) I’m using a Product List with Product Options (special pricing, sub products). How can I make the associated image larger and appear BEFORE the Description without creating a two column form? I want it to look like this:

Thanks so much for your help,

Gail Darling

Hello Gail,

Thanks for reaching out to Jotform Support. We can adjust the position of the images on your product list, but first, we need to set it as a Two-column Layout and then add custom CSS to it. It is very easy to do. Let me show you how:

1. In Form Builder, select the Product list and click the Cart Icon.

2. Select the Two Column layout.

3. Copy the code below.

/* Reposition images - 16535761 */

.product-container-wrapper div:last-of-type {

  display:flex !important;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  

}

.product-container-wrapper div:last-of-type span{

  width: 80% !important;

}

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

  height: 180px !important;

}

.image_area.form-product-image-with-options div {

  width: auto !important;

}

/* End code here */

4. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

5. In the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.

As for your other question, I've moved that to a new thread. You can check that out here.

Reach out again if you have any other questions.

Thanks for your quick reply. This does move the image above the
description, but the result of having initially selected 2-column is that
the other product fields are squished. Description now takes up 10 lines
instead of 8,. Quantity label doesn't fit on one line. Price $ on a
separate line from the 12.00 amount.
...

Hi Gail,

Could you try removing the existing CSS code on your form and use the custom CSS code that I have provided below?

/*Change the display format for two row column display for Product List - 16535761*/

span.form-product-item {

    width: calc(100% - 10px) !important;

}

.form-product-item.new_ui.show_image .p_image {

    width: 50% !important;

    max-height: 250px !important;

    height: 250px !important;

}

/*Code ends here*/

Result:

Give it a try and let us know how it goes.

That fixed it! Thanks again, Gail
...