shop does not display properly on mobile devices

Hello,

the shop displays 2 products in a row on mobile devices and the second product “covers” the first partially.
I have no idea how to either modify picture and text, so that both fits to the page, or to display only 1 product per row.
I tried custom CSS, but it does not work.

/* Display one product per row on mobile */
@media only screen and (max-width: 768px){
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product{
        width: 100% !important;
        clear: none!important;
    }    
}

Thanks for your help.

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