Problem with mobile display 3 products in a row.

I have a problem with the mobile display from our website: https://www.vakantiehuisibiza.com/vakantiehuis-zoeken/

On the store page I want to show three products next to each other of 390x250px. I have this set with the customizer woocommerce plugin.
Because the three products fill up half of the monitor screen, I used the following codes in CSS:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 30%;
float: center;}

and:

.woocommerce div.product div.images img {
width: 85%;}
—

I am satisfied with the appearance of the desktop. The problem is that the products are displayed diagonally below the other on the mobile view and are misaligned.

I would like both the vertical / horizontal as mobile display that one row is shown . You may have a solution to this problem?

Thanks! Regards Ron

https://www.ads-software.com/plugins/woocommerce/