/** * woocommerce-smallscreen.scss * Optimises the default WooCommerce frontend layout when viewed on smaller screens. */ /** * Imports */ @import "bourbon"; @import "mixins"; @import "variables"; /** * Style begins */ .woocommerce, .woocommerce-page { table.shop_table_responsive { thead { display: none; } tbody { tr:first-child { td:first-child { border-top: 0; } } th { display: none; } } tr { display: block; td { display: block; text-align: right !important; // Important to overwrite order status inline styling &.order-actions { text-align: left !important; } &:before { content: attr(data-title) ': '; font-weight: 700; float: left; } &.product-remove, &.actions { &:before { display: none; } } } &:nth-child(2n) { td { background-color: rgba(0,0,0,0.025); } } } &.shop_table_order_pay { tfoot { th { display: none; } td:before { content: attr(data-title) ' '; // No colon needed } } } } table.my_account_orders { tr { td { &.order-actions { text-align: left; &:before { display: none; } .button { float: none; margin: .125em .25em .125em 0; } } } } } /** * General layout */ .col2-set { .col-1, .col-2 { float: none; width: 100%; } } /** * Products */ ul.products { li.product { width: 48%; float: left; clear: both; margin: 0 0 2.992em; &:nth-child(2n) { float: right; clear: none !important; } } } /** * Product Details */ div.product, #content div.product { div.images, div.summary { float: none; width: 100%; } } /** * Cart */ table.cart, #content table.cart { .product-thumbnail { display: none; } td.actions { text-align: left; .coupon { float: none; @include clearfix(); padding-bottom: .5em; } input, .button, .input-text { width: 48%; box-sizing: border-box; } .input-text + .button, .button.alt { float: right; } } } .cart-collaterals { .cart_totals, .shipping_calculator, .cross-sells { width: 100%; float: none; text-align: left; } } /** * Checkout */ &.woocommerce-checkout { form.login { .form-row { width: 100%; float: none; } } } #payment { .terms { text-align: left; padding: 0; } #place_order { float: none; width: 100%; box-sizing: border-box; margin-bottom: 1em; } } /** * Account */ .lost_reset_password { .form-row-first, .form-row-last { width: 100%; float: none; margin-right: 0; } } } /** * Twenty Thirteen specific styles */ .single-product { .twentythirteen { .panel { padding-left: 20px !important; padding-right: 20px !important; } } }