Form is displaying incorrectly.

  • christlifemin
    Asked on March 1, 2017 at 5:34 PM

    I offer items for sale in a Jotform. The items recently started displaying incorrectly. The picture of the item is under the check box and description when viewed in Google Chrome. It displays correctly in Edge. The first item was just added today and it displays correctly in either browser. This only started happening in the last month or so. How can I correct this so that it displays correctly in any browser?  I have attached a screen shot from Chrome.

    Thanks for your help!

    Jotform Thread 1079718 Screenshot
  • jonathan
    Replied on March 1, 2017 at 8:55 PM

    I added these CSS codes on your form https://form.jotform.com/62735031444147 

    .form-product-item input, .form-product-name, .form-product-details{

    float: left;

    }

    Form is displaying incorrectly Screenshot 20

    Please check again. Let us know if this did not fix the issue.

     

  • christlifemin
    Replied on March 2, 2017 at 10:07 AM

    It looks like that took care of the problem. Only thing is on a couple of items where the description is longer than one line, it is now pushed below the picture away from the check box. Can that be fixed? Can you tell me why this suddenly became a problem? I tried to insert a picture of the problem but looks like the insert picture function is not working correctly.

    Thanks for your help!

    Form is displaying incorrectly Screenshot 20

  • Kiran Support Team Lead
    Replied on March 2, 2017 at 12:52 PM

    Please allow me some time to check on this and get back to you.

    Thank you for your patience. 

  • Kiran Support Team Lead
    Replied on April 17, 2017 at 2:44 AM

    I am sorry for the delay in getting back on this issue. Please inject the following CSS code to the form additionally to the code that has already been added. It should be displaying the images and the description correctly.

    .form-product-name {

    width: 70% !important;

    }

    .form-product-item.hover-product-item {

      width: 100% !important;

    }

    Let us know if you need any further assistance. We will be happy to assist.