/* Plugin Name: Sky WooCommerce Responsive Cart Plugin URI: https://mattbiscay.com Description: Make WooCommerce cart responsive Version: 1.1 Author: Matt Biscay Author URI: https://mattbiscay.com */ /* responsive cart */ @media only screen and ( max-width: 479px ) { .short-description, .product_meta, body.woocommerce div.product .woocommerce-tabs, body.woocommerce #content div.product .woocommerce-tabs { display: none; } body.woocommerce .images { float: none !important; width: auto !important; margin-bottom: 40px !important; clear: both !important; } table .product-thumbnail { display: none; } .woocommerce-page #content div.product form.cart .variations { margin-left: 0; } table.cart th, #content table.cart th, table.cart td, #content table.cart td, table.cart tr, #content table.cart tr, #content-area table tr, #content-area table td, #content-area table th { padding: .857em 0.287em; } .woocommerce .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { width: 100% !important; } .woocommerce .woocommerce form .form-row, .woocommerce-page form .form-row { width: auto !important; float: none !important; } #order_review .shop_table { margin-left: 0; } /* cart: tax on its own line */ .includes_tax { display: block; } } /* cart weird bug on Safari: cart table is not collapsing */ /* this corrects the bug on iphones */ @media (max-width: 768px){ .iphone .woocommerce table.shop_table_responsive tr, .iphone .woocommerce-page table.shop_table_responsive tr { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; } .woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before { content: attr(data-title) ‘ ‘; font-weight: 700; float: left; } p.no-shipping-options { clear: both; margin-top: 3rem; } }