CSS help with widget layout

  • krochel
    Asked on February 7, 2017 at 9:31 PM

    I need to align my form boxes better in the configurable list widget.

  • Ian
    Replied on February 8, 2017 at 1:06 AM

    I noticed that you already have custom css for configurable list widget

    I made a little more changes to align it better in one row. Care has been taken to make it responsive for smaller screens

    Copy the existing css code and overwrite the existing code in the widget with the following css code

    Just so you know, the code in orange background is the change I made to existing css code

     

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 20px;

    }

    input{

    width:65px!important;

    }

    td{

    height:40px;

    }

    td.col1, td.col2, td.col3, td.col4 {

        display: inline-block;

        width: 75px;

        float: left;

    }

    th {

        display: none;

    }

    td.col1:before {

        content: "Year";

        display: block;

     

    }

    td.col2:before {

        content: "Make";

        display: block;

     

    }

    td.col3:before {

        content: "Model";

        display: block;

    }

    td.col4:before {

        content: "Vin";

        display: block;

    }

     

    This is how it will appear after applying the CSS code

    CSS help with widget layout Image 1 Screenshot 20

    Hope this helps.