Products bumping down weird

Support
#1

Hey,
On our home page the product are bumping down weird. I believe it is because some of the products have two lines of text is there a way I can add a little more space between the products so that it will not do this. http://vps28450.inmotionhosting.com/~outdoordogsupply/

#2

Hi There,

I am not sure what you meant by dumping down. This is what I am seeing at the moment: https://screencast-o-matic.com/watch/cbjbjdl7OF. Are you referring to overlapping issue when hovered? Please double check your hovered settings on Visual Composer. Make sure that you have enough space by default so that when hovered and the image got bigger there’s still room to grow and prevent overlapped.

#3

If you scroll down you will see what I am talking about. Here is a pic to show you what I am talking about.

#4

Hello There,

Thanks for updating in! This issue occurred because you have changed the column widths of your product items. To resolve this issue, please remove this css block first:

.home .woocommerce.columns-4 li.product {
        width: 17%;
        margin-right: 2%;
        float: left !important;
    }

And you should replace it using this code instead:

.home .woocommerce.columns-4 li.product {
        width: 17%;
        margin-right: 2%;
        float: none !important;
        display: inline-block !important;
    }

Please let us know how it goes.

#5

This fixed the gaps but now it is cutting off products weirdly. You can see in my pic. Also on my lap the boxes are not lined up evenly.

#6

Someone sent me new code to fix another problem and it looks like it might have fixed the problem with the code. Is there a way to make it so on the right and left there is a small gap so the products don’t go right up to the edge? Just a vary small space.

#7

Hello There,

To add a gap on the left and right of the container of the item, you can make use of this code:

.home .woocommerce.columns-4 {
   padding-left: 30px;
   padding-right: 30px;
   text-align: center;
}

We would loved to know if this has work for you. Thank you.

#8

Awesome thank you so much

#9

You’re welcome, glad we could help.

Cheers!