gap between two products

i want a little gap between two products . but not happening. details are given in the screenshot.
.products .product-grid-item{
margin: 5px;
}
Using those codes creates a gap between the products. This is what I want, but the whole section is pressed to the left and a lot of space is created on the right.

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached.

The whole container is moved to the left side because when you try to add margin value to the product grid then the width of the grid items is affected.

So you have to decrease the width of the items as well.

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

And see if this works for you otherwise it requires Customizations.

.home .product-grid-item.product.wd-hover-quick {
    margin: 5px;
}

.home .product-grid-item.col-lg-2 {
    max-width: 15.666667%;
}

Regards.
Xtemos Studios.

[Author]

Posts