Space between products rows

Hi,

In Theme Settings -> Shop -> Products Grid there is this option “Space between products”. It allows you to choose your desired space between products, horizontally (basically the space between product COLUMNS).

In my case, I want to increase the space between products, vertically (i.e. the space between product ROWS, please see attached).

Can you please help me with that?

Many thanks, guys!

Attachments:

You must be logged in to view attached files.

Hello,

Please provide your site link. If your site is under maintenance send me please also admin access. I will generate CSS.

Best Regards

Hello, please see the website link in the private content section.

While you are at it, please also help me with the following issue:

I particularly like the hover on product effect that is set right now, i.e. “Show summary on hover” (although I want to increase the space between the rows), but on Mobile version is not good at all, because when you scroll, and your finger inevitably touches a product image as you scroll down, the hover effect is too big that it covers the next product image situated right below, so it fills too much of the mobile screen and also covers the photo below (please see attached).

For Mobile, the best for me is the Standard button effect. Can you please help me with an easy CSS code in order to have the “Show summary on hover” effect for desktop and the “Standard button” effect for mobile?

Thank you!

You’re the best!

Attachments:

You must be logged in to view attached files.

Hello,

Please add this CSS to Theme Settings > Custom CSS:

.products-spacing-20 .product {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 80px;
}

If you want you can change this value margin-bottom: 80px; to make the gap bigger/smaller

Unfortunately, there is no option to set different hover effect for different devices. by the way, using this code you would not have the problem of products overlapping.

Best Regards

[Author]

Posts