I’m having trouble figuring out how to adjust the space between products on my shop’s main page for both web and mobile. I’ve attached a screenshot for reference.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
@media only screen and (min-width: 1300px) {
body.woocommerce:not(.single-product) ul.products[data-n-desktop-columns="4"] li.product {
margin: 0 0.5% 1.5% 0 !important;
}
}
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
And on desktop when I try to increase it, it becomes 3 columns. Can you please help me with the same distance as it is on one of my website pages https://shorturl.at/o8N90 between the blog articles.
One last thing I noticed, while it all looks how I wanted. I notice on the left side there is some padding/margin, on web and mobile site. On the right, it's aligned correctly but on the left, it's not. Thanks!
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
@media only screen and (max-width: 690px) {
body.woocommerce:not(.single-product) ul.products[data-n-phone-columns="2"], body.woocommerce:not(.single-product) ul.products[data-n-phone-columns="3"] {
width: 100% !important;
}
}
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Hi,
I’m having trouble figuring out how to adjust the space between products on my shop’s main page for both web and mobile. I’ve attached a screenshot for reference.
Can you help me with this?
Thanks!
Attached files: Screenshot 2025-01-27 at 08.48.12.jpg
Hello Asingh,
Thanks for writing to us.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
@media only screen and (min-width: 1300px) { body.woocommerce:not(.single-product) ul.products[data-n-desktop-columns="4"] li.product { margin: 0 0.5% 1.5% 0 !important; } }Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Hi Judith,
The code doesn't work on mobile.
And on desktop when I try to increase it, it becomes 3 columns. Can you please help me with the same distance as it is on one of my website pages https://shorturl.at/o8N90 between the blog articles.
Thanks!
Hi again,
Thank you for getting back to us.
Try replacing the previous CSS with this one to have the spacing match that of the blog.
@media only screen and (min-width: 1300px) { body.woocommerce:not(.single-product) ul.products[data-n-desktop-columns="4"] li.product { width: calc(25% - 30px) !important; margin: 15px !important; } } @media only screen and (max-width: 690px) { body.woocommerce:not(.single-product) ul.products[data-n-phone-columns="2"] li.product, body.woocommerce:not(.single-product) ul.products[data-n-phone-columns="2"] li.product.material { width: 100% !important; margin: 15px !important; } }Try that and let us know how it goes.
Cheers,
Sorry for the confusion Andrew, Judith.
On the web, the code Andrew gave me works the way I wanted.
On mobile, I still want products in two columns. But would like to increase the space between two items.
Hi again,
Thank you for getting back to us.
Please add this CSS to adjust the spacing on mobile screens.
@media only screen and (max-width: 690px) { body.woocommerce:not(.single-product) ul.products[data-n-phone-columns="2"] li.product, body.woocommerce:not(.single-product) ul.products[data-n-phone-columns="2"] li.product.material { width: calc(50% - 30px) !important; margin: 15px !important; } }Try this and let us know how it goes.
Cheers,
It works :) thank you
Hi again,
Thank you for getting back to us.
I'm glad we could assist. Feel free to reach out if you have any other queries.
Cheers,
Hi Andrew,
One last thing I noticed, while it all looks how I wanted. I notice on the left side there is some padding/margin, on web and mobile site. On the right, it's aligned correctly but on the left, it's not. Thanks!
Hello Asingh,
Thanks for writing back.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
@media only screen and (max-width: 690px) { body.woocommerce:not(.single-product) ul.products[data-n-phone-columns="2"], body.woocommerce:not(.single-product) ul.products[data-n-phone-columns="3"] { width: 100% !important; } }Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.