Mobile view 2products in one row

Hi team,

I want my theme to show two product in one row in mobiel view instead of showing like this:

https://snipboard.io/6RN1L5.jpg



It should be implement on category page shop page and home page also on product page fir related products and corss selling products.

I tried couple of codes but nothing working. I have added theme in additional CSS file(Customisation page) of theme also i tried with code snippet.

Please find below code: 

Code1:

@media (max-width: 480px) { .products-grid .product { width: 50% !important; }}

Code 2:

@media only screen and ( max-width: 980px ) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 47.5% !important;
margin-right: 2.5% !important;
}
.woocommerce-page ul.products li.product:nth-child(2n) {
margin-right: 0 !important;
}
}

Code 3:

@media(max-width:767px){
.entry-content .products li {
float: left;
width: 50%;
}
}

Code 4: 
.categories-grid .product-category {
width: 50%;
}

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