Hi,
1. That would require custom CSS to be added to handle that, similarily to the responsive CSS used on the cart view of the checkout.
For example, here is the CSS we added to HikaShop to have the cart view responsive on the checkout:
@media only screen and (max-width:350px) {
.hikashop_product_price_full {
padding-top: 10px !important;
height: 50px !important;
}
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
#hikashop_checkout_cart table,
#hikashop_checkout_cart table thead,
#hikashop_checkout_cart table tbody,
#hikashop_checkout_cart table thead th,
#hikashop_checkout_cart table tbody td,
#hikashop_checkout_cart table thead tr,
#hikashop_checkout_cart table tbody tr {
display: block;
}
#hikashop_checkout_cart table tfoot tr,
#hikashop_checkout_cart table tfoot td,
#hikashop_checkout_cart table tfoot {
display: block;
}
#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_total2_title,
#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_shipping_title,
#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_final_total_title,
#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_coupon_title,
#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_tax_title,
#hikashop_checkout_cart table tbody td#hikashop_checkout_cart_payment_title,
#hikashop_checkout_cart table tbody td.hikashop_cart_additional_title {
display: none !important;
}
#hikashop_checkout_cart_final_total_title { display:none; }
#hikashop_checkout_cart table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#hikashop_checkout_cart table tr { border: 1px solid #ccc; }
#hikashop_checkout_cart table tr.margin { border: 0px solid #ccc; }
#hikashop_checkout_cart table td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 30%;
}
#hikashop_checkout_cart td.hikashop_cart_product_name_value {width: 64%}
#hikashop_checkout_cart table td:before {
position: absolute;
left: 6px;
padding-right: 10px;
}
#hikashop_checkout_cart table td.hikashop_cart_product_quantity_value:before { padding-top:3px }
#hikashop_checkout_cart table td:before { content: attr(data-title); font-weight: bold; }
#hikashop_checkout_cart .hikashop_product_price_full {
text-align: left;
min-height: 20px;
padding-left: 20px;
padding-top: 3px;
display: inline !important;
}
#hikashop_checkout_cart .hikashop_product_quantity_field { margin: 0px 16px 0px 20px !important; }
#hikashop_checkout_cart a span.hikashop_product_variant_subname img { margin-left: 10px; display: block; margin-top: 5px; }
#hikashop_checkout_cart td.hikashop_cart_product_price_value span.visible-phone { margin-left: 5px; display:inline !important}
#hikashop_checkout_cart tbody tr td.hikashop_cart_empty_footer { display: none !important }
}
2. I don't understand what you want to switch off. What status are you talking about ?