How to split my products list in two columns?

  • Profile Image
    Asked on April 11, 2014 at 01:19 PM


    I have not yet uploaded my form as I wish to know if it is possible to spread my items so that I could have 5 items on the left and the other 5 items to the right of those.

    Its called Product Order Form

  • Profile Image
    Answered on April 11, 2014 at 02:53 PM


    To split your Products in two columns simply inject this CSS code to your form:



    width:695px !important


    .form-product-item {

    border: 1px solid #EFEFEF;

    margin: 1px;

    float: center;

    width: 293px;


    .form-product-item + br {



    br + b {

    float: left;

    padding-top: 20px;


    .form-payment-total {

    line-height: 50px;

    margin: 1px;

    border: 0px solid #EFEFEF;

    border-radius: 4px;

    padding: 15px;

    padding-right: 193px;

    padding-left: 6px;


    Then it will look this way: 

    Here is how to inject css code to forms: How to inject custom CSS codes

    You can find this workaround in this guide: How to have a two columns payment form

    Please inform us if you need further assistance with this inquiry.


  • Profile Image
    Answered on April 12, 2014 at 07:46 AM

    Thank you for that, however although the next button works in the preview, when I embed on my page it does not work using source code. Also even when I just use the embed code the next button works but my items are not displayed as above ie 5 on the left and 5 on the right

  • Profile Image
    Answered on April 12, 2014 at 07:50 AM

    Hello sreken,

    It would be great if you can provide us the URL when you have placed your form with so we can check and provide you a further fix with your page's layout.

    Looking forward to your response.


  • Profile Image
    Answered on April 12, 2014 at 08:32 AM

    I do apoligise it seems to be working now, i have to view it in a browser rather then in preview using front page.

    I am posting a new thread question on the form lay out.