How can I make the shop page on a mobile device display items in 2 columns?

Currently trying to make the shop page display products in 2 columns on mobile devices  running theme on  7.1

I have used the below code but it forces all products to half the screen and on one column?

any help will be really appreciated

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

.products.collection-content-wrapper .list-grid {
      width:50% !important;
      clear:right !important;
      padding-right: 5px !important;
      padding-left: 0px !important;
  }
  
  .product-image a{
    width: 100% !important;
  }  }

Solved some similar cases.

Your code is incorrrect. Can you share link to shop page on your site?