woocommerce related products 2 column issues for mobile

Question

Morning all,

I can't seem to get my Woocommerce related products to show in a 2 column, side by side format. When viewed on mobile device

You will see on this page that the related products are one after another, id like 2 side by side before a new row starts. https://ruggedasylum.com/product/solo-smoke-free-fire-pit/

Can someone assist me with how this is achieved, please?

I have tried this so far but it only makes smaller and continues to place 1 product on each line. It also moved the 'Related Products' title across to the left instead of centered.

@media screen and (max-width: 767px){
.woocommerce .related.products {
width: 50% !important;
}}

I have gone onto W3 Schools and the CSS code they suggest for side by side in a responsive view doesn't seem to make a difference, less so than the code above.

please note I am happy with the way it is currently looking on the desktop version of the page.

I look forward to your input, a very grateful Ryan :)

user_11094180 · Answer

  @media screen and (max-width: 767px){

   .related.products ul.products li.product {
    flex: 0 1 auto;
    width: 45%;

  }
}

that should do the trick but you might want to adjust % for more info on flexbox, u can visit this https://css-tricks.com/snippets/css/a-guide-to-flexbox/

woocommerce related products 2 column issues for mobile

1 Answers