Product Columns not showing in preview

  • Profile Image
    SarahBishoff
    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;

    }

    /*End*/

  • Profile Image
    janberk
    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
    SarahBishoff
    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...

    1511886585Picture17.jpg

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

    Hi,

    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.