csswordpresswoocommerce

Implement 2 columns on mobile - Woocommerce

I would love to show 2 columns of products in my Woocomerce active shop. I use a child theme based on 'Shopisle', and I'm not really sure what is the best way to make it happen. A CSS-only solution would be viable? Will it behave properly, without any bugs?

I believe the theme uses Bootstrap as a foundation, but I'm not 100% certain about it.

Thanks in advance!

Solution

  • Not sure if this is what you want - since you gave almost no code example here.

    But usually what I'd do is using a flexbox:

    .wrapper-of-all-products {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.product {
  width: 49%; // just to be sure there is a gap
  box-sizing: border-box;
}

    Of course you need to change the classnames. I have no idea how they are called.