How do I decrease spacing between widget items?

  • fhpw
    Asked on May 5, 2016 at 6:53 AM

    I have successfully created a block of Inventory Widget Items. I decreased the padding with the following CSS fro two blocks of widget items:

     

    #id_85,#id_86,#id_87,#id_88,#id_89 {
        padding-top : 0px !important;
        padding-bottom : 0px !important;
        margin-top : -20px !important;
        margin-bottom : 0px !important;
    }

    #id_90,#id_91,#id_92,#id_93 {
        padding-top : 0px !important;
        padding-bottom : 0px !important;
        margin-top : -20px !important;
        margin-bottom : 0px !important;
    }

    https://form.jotform.com/61236614962962

    In design mode it the widget items are flushed, but when previewing the widgets items are spaced apart.

     

     

    Design mode

    How do I decrease spacing between widget items? Image 1 Screenshot 30

     

    Preview/Browser view

    How do I decrease spacing between widget items? Image 2 Screenshot 41

    I tried three different browsers with all the same results. What am I missing? 

     

    Thanks,

     

  • Boris
    Replied on May 5, 2016 at 8:54 AM

    There seems to be a small error in your CSS codes, which was preventing your custom CSS from being applied. In the Designer, this is the erroneous code I see at line 49:

    .form-textbox {
        #input_23{width : 100px;
        width : 122px;
    }

    How do I decrease spacing between widget items? Image 1 Screenshot 30

    Please remove the entire line marked in red, meaning you should remove #input_23{width : 100px;, and your custom CSS should be applied correctly after that:

    How do I decrease spacing between widget items? Image 2 Screenshot 41

    If you need further assistance, please let us know.

  • fhpw
    Replied on May 5, 2016 at 9:28 AM

    Thanks!  I just discovered it and was going to reply. It worked.