2 columns of products on mobile view

  • Resolved silzsyk

    (@silzsyk)


    3 years ago

    Hi,
    I have Botiga Theme
    I don’t know how I can display 2 columns of products in the shop pages and the category page on mobile view.

    I managed to do this for the first page (homepage) with this code:

    .wc-block-grid__products .wc-block-grid__product {
    width: 50%;
    float: left;
  }
}

    a

    can you help me?
    thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @silzsyk,

    Thank you for contacting us. I am happy to help out.

    Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard. 

    @media only screen and (max-width: 480px) {
  .wc-block-grid.has-4-columns .wc-block-grid__products {
    display: flex;
    flex-wrap: wrap;    
  }
  .wc-block-grid.has-4-columns .wc-block-grid__product {
    flex: 1 0 50%;
    max-width: 50%;
    padding: 0;
    padding-right: 0px;
    margin: 0 0 24px;
  }  
}

@media only screen and (max-width: 575px) {
  ul.products li.product {
    float: left;
    width: calc(50% - 15px);
    margin-right: 30px;
  }  
}

    Hope that helps.

    Regards,
    Kharis

    Thread Starter silzsyk

    (@silzsyk)

    Thanks a lot!!! @kharisblank

    You’re welcome @silzsyk!

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

    Regards,
    Kharis

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘2 columns of products on mobile view’ is closed to new replies.