Mobile issue with WooCommerce

Having an issue with products on Mobile. They don't display properly and cut off on the left hand side. I tried some CSS but no luck. Any help is appreciated.
I included screenshot. Thank you. http://inhalebbq.com/shop/

 

Hi,

Greetings from InkThemes,

It would be our pleasure to serve you.

Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (min-width: 601px) and (max-width: 767px){
.woocommerce ul.products li.product a img {    
    margin: 0 !important;
}
}
@media only screen and (min-width: 481px) and (max-width: 600px){
.woocommerce .products ul, .woocommerce ul.products {
      margin-left: 160px !important;
}
.woocommerce .woocommerce-ordering select {
       margin-right: 50px !important;
}
}
@media only screen and (max-width: 480px){
.woocommerce ul.products li.product a img {  
    margin-left: 77px !important;
}
}

Hope it will resolve your issue

Thanks & Regards!
Nitin
InkThemes.com

 

Thank you. That worked.