Inventory Widget - decreasing space between widgets

Hello again - another inventory question.

I searched this question before I asked it and there was a lovely answer directing the user to add a specific CSS code to decrease the space between each inventory widget. However this CSS code won't work for mine since it's on different lines etc - but I don't know how to create my own code.

If I could have some assistance on how to add a CSS code to decrease the space between all of my inventory boxes, I would be ever so obliged.

I know the customer support is amazing on this site and I am looking forward to knowing the response.

Justine

In order to target specific fields to apply CSS code, you need to get their ids by doing a right click>>Inspect Element in your browser:

Please inject the following CSS code in your form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

#id_12{

    padding-bottom: 0px !important;

    margin-bottom: 0px !important;

}

#id_13{

    padding-top: 0px !important;

    margin-top: -10px !important;

    padding-bottom: 0px !important;

    margin-bottom: 0px !important;

}

#id_14,#id_15{

    padding-top: 0px !important;

    margin-top: -22px !important;

    padding-bottom: 0px !important;

    margin-bottom: 0px !important;

}

#id_16,#id_17,#id_18,#id_19,#id_20{

    padding-top: 0px !important;

    margin-top: 0px !important;

    padding-bottom: 0px !important;

    margin-bottom: 0px !important;

}

#id_21{

    margin-top: -23px !important;

}

Here is my cloned version: https://form.jotform.com/62066871951967 

Let us know if you need more help.

*happy sigh* It is BEAUTIFUL. Thank you. I did exactly as you said and it worked perfectly. I am eternally grateful.

Also I imagine your job is quite interesting as you get to see all the different forms that people are struggling with - and you make their day by fixing it so easily!!

Thank you so much. Yipeeee!!!

Oops.

I needed to add another item (Lard/Tallow) and now it messed everything up.

I thought I would be all clever and just change the numbers so that it was #id_16 to #id_21 and then the last code would be for #id_22 but it didn't work and nothing is changing.

Then I messed around with the pixel amounts but that didn't change either

I need a code genius to help again! Please please thank you thank you!

Hello,

I have solved this issue in your form by changing the height of the #id_26 widget and then injecting the following custom css code:

li#id_21 {

    margin-top: -10px !important;

}

#id_26 {

    margin-top: -10px !important;

}

Please check the screenshot below:

Hope this helps.

Do get back to us if you need any other changes.

Thank you!

Yes! thank you so much. That worked perfectly. I really appreciate it.