Product Columns not showing in preview

  • Profile Image
    Asked on November 27, 2017 at 11:07 PM

    Hi! I'm using the CSS code below to split my products into two columns, and it works great in the building stage but when I preview it, the products are still displayed one below the other, in one column. Any way to fix this? Thank you!

    /*Start: CSS to make 2 column payment field*/

    .form-product-item {

        border : 1px solid #EFEFEF;

        margin : 1px;

        float : center;

        width : 293px;

        vertical-align : top;

        padding-bottom: 20px !important;


    .form-product-item + br {

        display : none;


    br + b {

        float : right;

        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;

        direction: rtl;


    .form-product-item > div {

        float: right !important;


    .form-product-child-table {

        margin-top: 15px !important;



  • Profile Image
    Answered on November 28, 2017 at 03:10 AM

    I've checked your form and i see a property written wrong. 

    1511856298Screen Shot 2017-11-28 at 11.0

    when i change the float property to left the products will be visible in two columns as seen below i have also added height: 100px to ensure all products are same.

    1511856598Screen Shot 2017-11-28 at 11.0

  • Profile Image
    Answered on November 28, 2017 at 11:29 AM

     Thank you! This is great. I just cant set up the height to be 100px because it will cut off the "mixed fresh green garland" option and customers wont be able to order. But if I leave the the height unspecified, the form looks great as I am building, exactly as above, but when I click on preview, for some reason, one of the items of the left column moves to the right column...


  • Profile Image
    Answered on November 28, 2017 at 12:18 PM


    You can add height:120 px; to your css under .form-product-item.

    Here is a screen shot.

    I hope this information helps you.

    Best Regards.