No gap between products

[Rob_G33]

On my page see link https://www.rgualtphotography.com/?page_id=1122&preview=true I have my products layed out 3 per row which is fine. When viewed in mobile they are obviously in a line down the page, there is no gap between products in this view though. Is there any way I can change this?

[jade]

Hi there,

Please add this code in the Global CSS:

@media (max-width: 480px) {
    .woocommerce li.product {
        margin-bottom: 15px;
    }
}

---

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

[Rob_G33]

Thank you I’ll give it a go and see how I get on.

[nico]

Hi @Rob_G33,

Let us know how it goes.

Thanks.

[Rob_G33]

This works, is there anyway to make it work on both mobile and tablet?

Thanks Rob

[friech]

Hi Rob,

Yes, you can increase the @media query from 480px to 979px

@media (max-width: 979px) {
    .woocommerce li.product {
        margin-bottom: 15px;
    }
}

Cheers!

[Rob_G33]

Ok I’ll give that a go. Thank you.

[jade]

You’re welcome.