Question 2632 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to display Woocommerce related products in 2 columns for mobile devices – WordPress

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.

Tags:

2

Answers


  1. 0

    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%;
   }
}
    Login or Signup to reply.
  2. 0

    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);
 }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search