woocommerce/assets/css/woocommerce-smallscreen.css

156 lines
4.1 KiB
CSS
Raw Normal View History

/**
* This stylesheet optimises the default WooCommerce layout when viewed on smaller screens.
*/
.clear {
clear: both;
}
.nobr {
white-space: nowrap;
}
/**
* Objects
*/
.woocommerce,
.woocommerce-page {
/**
* General layout
*/
/**
* Products
*/
/**
* Product Details
*/
/**
* Cart
*/
/**
* Checkout
*/
}
.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
float: none;
width: 100%;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 48%;
float: left;
clear: both;
margin: 0 0 2.992em;
}
.woocommerce ul.products li.product:nth-child(2n),
.woocommerce-page ul.products li.product:nth-child(2n) {
float: right;
clear: none !important;
}
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary,
.woocommerce #content div.product div.summary,
.woocommerce-page #content div.product div.summary {
float: none;
width: 100%;
}
.woocommerce table.cart .product-thumbnail,
.woocommerce-page table.cart .product-thumbnail,
.woocommerce #content table.cart .product-thumbnail,
.woocommerce-page #content table.cart .product-thumbnail {
display: none;
}
.woocommerce table.cart td.actions,
.woocommerce-page table.cart td.actions,
.woocommerce #content table.cart td.actions,
.woocommerce-page #content table.cart td.actions {
text-align: left;
}
.woocommerce table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon,
.woocommerce #content table.cart td.actions .coupon,
.woocommerce-page #content table.cart td.actions .coupon {
float: none;
padding-bottom: .5em;
}
.woocommerce table.cart td.actions .coupon:after,
.woocommerce-page table.cart td.actions .coupon:after,
.woocommerce #content table.cart td.actions .coupon:after,
.woocommerce-page #content table.cart td.actions .coupon:after {
content: "";
display: block;
clear: both;
}
.woocommerce table.cart td.actions input,
.woocommerce-page table.cart td.actions input,
.woocommerce #content table.cart td.actions input,
.woocommerce-page #content table.cart td.actions input,
.woocommerce table.cart td.actions .button,
.woocommerce-page table.cart td.actions .button,
.woocommerce #content table.cart td.actions .button,
.woocommerce-page #content table.cart td.actions .button,
.woocommerce table.cart td.actions .input-text,
.woocommerce-page table.cart td.actions .input-text,
.woocommerce #content table.cart td.actions .input-text,
.woocommerce-page #content table.cart td.actions .input-text {
width: 48%;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
.woocommerce table.cart td.actions .input-text + .button,
.woocommerce-page table.cart td.actions .input-text + .button,
.woocommerce #content table.cart td.actions .input-text + .button,
.woocommerce-page #content table.cart td.actions .input-text + .button,
.woocommerce table.cart td.actions .button.alt,
.woocommerce-page table.cart td.actions .button.alt,
.woocommerce #content table.cart td.actions .button.alt,
.woocommerce-page #content table.cart td.actions .button.alt {
float: right;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .shipping_calculator,
.woocommerce-page .cart-collaterals .shipping_calculator,
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells {
width: 100%;
float: none;
text-align: left;
}
.woocommerce #payment .terms,
.woocommerce-page #payment .terms {
text-align: left;
padding: 0;
}
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
float: none;
width: 100%;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
margin-bottom: 1em;
}