Why are my product items overlapping?

I'm having a problem with the product images overlapping on my form and I can't figure out why. I've already spent a decent amount of time searching this question and none of the answers I found have fixed the problem so I'm hoping someone here can help.

Here is the form https://form.jotform.com/71204662024142

And here are a few of the things I've tried.

.form-product-item.hover-product-item {

    height: auto !important;

}

.form-product-item {

    height: auto !important;

}

.form-product-item.hover-product-item {

    border : 10px solid #fff;

}

.form-product-item img {

    border : 1px solid #fff;

}

.form-product-item.hover-product-item {

    padding-bottom : 20px;

}

What's strange to me is that every time I inject a snippet of code, the form reflects that change in the editor, so I think "Ok great, that fixed the problem!" but when I view the live preview of the form everything goes back to overlapping. The only thing that has even remotely worked was increasing the product item height to like 150px, and it looked terrible. 

Please help. 

Thanks, 

I have tested your form and I was not able to replicate mentioned issue. Product images and items are not overlapping. I have also cloned your form and I am not able to replicate it on my cloned form as well. 

This CSS code that you have added to your form should resolve mentioned issue. 

.form-product-item img {

    border : 1px solid #fff;

}

If the issue still persist on your and add  !important rule to mentioned CSS code:

.form-product-item img {

    border : 1px solid #fff!important ;

}

If your form is embedded and if this this issue can only be replicated there, please provide us URL of your webpage. 

Let us know if you need further assistance.

Hey Joanna, 

The problem isn't exclusive to when it's embedded. My products overlap in the preview mode through jotform as well. I already tried the first snippet of code you mentioned, but I just added the !important rule and nothing changed. I've mentioned some of what I've tried injecting in my original post if you want to take a look. 

Here are screenshots of what I'm seeing on my end. I've tried using another browser and another computer and got the same results on both. As you can see, the sub products are overlapping. 

It seems that I did not understood your issue correctly when I replied to you previously.

If I understood you correctly you would like that all sub products are shown on your live form. 

Currently some of them are shown like this.

And you would like that they are shown like when product option is checked. 

Please note that this is default behavior. When product is not selected, height of product will depend of height of product image. 

You increase the height of products, like you already tried. However you should increase height only of specific products, not of all products. You can use :nth-child() rule to target only specific product. 

Add this CSS code to your form:

#cid_30 span.form-product-item:nth-child(2) {

    height : 160px!important;

}

#cid_30 span.form-product-item:nth-child(4) {

    height : 130px!important;

}

#cid_30 span.form-product-item:nth-child(6) {

    height : 130px!important;

}

#cid_30 span.form-product-item:nth-child(22), #cid_30 span.form-product-item:nth-child(24),#cid_30 span.form-product-item:nth-child(26),#cid_30 span.form-product-item:nth-child(28){

height: 70px!important

}

You can add custom height of each of your products. 

Product 1 is :nth-child(2), product two is :nth-child(4), product 3 is :nth-child(6) ...

Here is my demo form: https://form.jotformpro.com/71205571526957 

Feel free to test it and clone it. 

Hope this will help. Let us know if you need further assistance. 

Thank you so much! I was trying to use the nth-child rule yesterday, but I couldn't figure out which product was which child from looking at the page source. 

Much appreciated.