Two Columns for Shop Page on Mobile

Hi, how can I setup the Shop page to have 2 columns on mobile devices? I tried the following code, but the styling isn’t right (ex. product title isn’t responsive, sale badge isn’t responsive, etc). Website is dressforhumanity.com

/*2 Columns for Products Mobile*/
@media (max-width: 767px) {
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        width: 40% !important;
        margin-right: .5% !important;
        margin-bottom: .5%;
}
}