How to display Woocommerce related products in 2 columns for mobile devices-CodePudding

For mobile devices only, I am trying to display Related Products across 2 columns rather than 1.

So far I have tried the following code snippet which seems to create space for another column, but the products are only appearing on the left column. The right side is empty.

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

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

  }
}

Just to reiterate, the issue is on mobile. If you reduce the screen width, you can see that the CSS above squashes the recommended products to the left but doesn't stack in 2 columns.

Any help is appreciated.

Note, I am also using Beaver Builder (similar to Elementor) if that helps but I don't think that would have any impact on the CSS required.

CodePudding user response：

The following code should work:

@media screen and (max-width: 767px){
 .woo_rel .related.products ul.products{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    grid-gap: 0;
 }
 .woo_rel .related.products ul.products li.product{
   width: calc(50% - 10px);
 }
}

CodePudding user response：

I am not sure how your specific theme's code or classes used are for that section, but I would just set it to 50% width.

@media screen and (max-width: 767px){
   .related.products ul.products li.product {
      width: 50%;
   }
}