CSS help with widget layout

  • Profile Image
    krochel
    Asked on February 07, 2017 at 09:31 PM

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

  • Profile Image
    Ian
    Answered on February 08, 2017 at 01: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

    Hope this helps.