How can I make my products be full size

  • Robert
    Asked on February 24, 2017 at 8:31 PM

    HOw do i stop my product from looking like this when I preview the form.

     

    How can I make my products be full size  Image 1 Screenshot 20

    On the design screen its perfect.

    My CSS - I change my page width to be a 1000

    .form-product-item {

    border: 1px solid #EFEFEF;

    margin: 1px;

    float: center;

    width: 200px;

    text-align: center;

    }

    .form-product-item img {

    width: 150px;

    height: 150px;

    float: none !important;

    margin: auto !important;

    }

    .form-product-item + br {

    display:none;

    }

    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;

    }

    .form-product-item .form-sub-label-container {

    width: 200px !important;

    }

    span.form-sub-label-container input {

    float: none !important;

    }

  • Chriistian Jotform Support
    Replied on February 25, 2017 at 2:14 AM

    On your custom CSS code, please try to add height: auto !important; on the .form-product-item CSS class.

    .form-product-item {

    border: 1px solid #EFEFEF;

    margin: 1px;

    float: center;

    width: 200px;

    text-align: center;

    height:auto !important;

    }

    How can I make my products be full size  Image 1 Screenshot 20

     

    Do let us know if you need further assistance.
    Regards.

  • rcoughtrey
    Replied on February 25, 2017 at 7:46 AM

    Spot on. looks perfect now thank you for your fast support