Product columns on mobile

Hi there,

try this CSS:

@media (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        margin-bottom: 1em;
    }
}

Hello David! Thanks for answering.

I have added the code and it effectively reduces the space of the upsells on the product page.

However, the space between products on the store pages is also reduced.

I don't want this to happen.

I just want to reduce the space between products on the product page.

In the CSS above just adjust the margin-bottom: 1em; value to a size you're happy with. Then it will be correct and equal in all shop loop lists

Hello david!

I added and modified the code as you indicated, but as much as I always tried the space varies.

What I really want is that the space in the upsells on the product page is equal to the space in the products displayed on the store pages.

To explain me better, here you can see an example of the store page: https://www.rebajaslocas.com/productos/

If you realize, the space between each product line is little.

Now, here you can see the upsells that are shown on the page of a product: https://www.rebajaslocas.com/producto/corrector-de-juanetes-x2-uds/

This is after all the description.

If you notice, the space between each product line is much larger.

You can target just the single product like so:

@media (max-width: 768px) {
    .woocommerce.single-product ul.products[class*=columns-] li.product {
        margin-bottom: 1em;
    }
}