Reply To: Problems with dropdown menu in mobile phone view checkout page

Hello,

Your cart order table was modified by custom code. Cart and checkout tables have different HTML structures and can’t be styled by the same custom code.

To achieve your desired look first you need:

1. Remove all your custom CSS code related to the checkout page order table.
2. Add the following custom CSS to the mobile custom CSS area in theme settings to change your checkout order table layout on mobile.

.website-wrapper .checkout-order-review {
   padding: 10px;
}

.woocommerce-checkout-review-order .wd-table-wrapper {
	 overflow-x: visible;
} 

.woocommerce-checkout-review-order .shop_table {
		display: flex;
    flex-direction: column;
}

.woocommerce-checkout-review-order .shop_table > thead,
.woocommerce-checkout-review-order .shop_table > tbody {
		display: table;
}

.woocommerce-checkout-review-order .shop_table > tfoot {
		display: flex;
    flex-direction: column;
}

.woocommerce-checkout-review-order .shop_table .cart-subtotal,
.woocommerce-checkout-review-order .shop_table .order-total {
		display: flex;
		justify-content: space-between;
}

.woocommerce-checkout-review-order .shop_table .woocommerce-shipping-total {
		display: flex;
    flex-wrap: wrap;
}

.woocommerce-checkout-review-order .shop_table .woocommerce-shipping-total th,
.woocommerce-checkout-review-order .shop_table .woocommerce-shipping-total td {
		width: 100%;
    max-width: 100%;
		text-align: left;
}

.woocommerce-checkout-review-order .shop_table #shipping_method {
	margin-right: 0;
}

.woocommerce-checkout-review-order .woocommerce-shipping-total th {
	 padding-bottom: 0;
   border-bottom: 0;
	 border-bottom: 0;
}

After implementing these changes your checkout order table should look like on the screenshot (https://prnt.sc/26m9km4)

Kind Regards