How to show 2 items per row on mobile platform?

Site URL: https://www.edxulondon.com/shop-1

I am trying to figure out how to show 2 items per row for my online store on mobile device. I tried the codes from other posts but they didn't work and they broke my mega menu plugin (CSS code). Is someone able to help?

https://www.edxulondon.com/shop-1

Many thanks in advance!

Hey Edwardxu, this is a great use for flexbox. Try this:

@media(max-width:767px) {
  .products .list-grid{
    display:flex;
    flex-wrap:wrap;
  }
  .grid-item{
    flex: 0 1 50%;
  }
}

Let me know if that does it for you!

23 minutes ago, WillMyers said:

Hey Edwardxu, this is a great use for flexbox. Try this:

@media(max-width:767px) {
  .products .list-grid{
    display:flex;
    flex-wrap:wrap;
  }
  .grid-item{
    flex: 0 1 50%;
  }
}

Let me know if that does it for you!

Hi Will, It worked perfectly! Thank you so much!