Hide Custom CSS from Mobile

So I finally was able to align the “add to cart” and the “price” elements in a straight line for desktop and tabs using this code below:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product 
{
	min-height: 350px !important ; 	margin-bottom:10px; 
}

ul.products li.product a.button {
	position: absolute !important ; 	top: 270px; left:39px
}

.woocommerce ul.products h2,
.woocommerce-page ul.products h2 {
  font-size:14px !important;
  text-align:center !important;
}

.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price 
{
	line-height: 1.3;
	position: absolute !important; top: 257px; left:80px;
}

But the problem here is this CSS code messes up the layout while browsing in a mobile, is there any way I can get around this?

• This topic was modified 4 years, 6 months ago by Steven Stern (sterndata).

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