_small-screen.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. @media only screen and (max-width: 768px) {
  2. table.shop_table_responsive {
  3. thead {
  4. display: none;
  5. }
  6. tbody {
  7. tr:first-child {
  8. td:first-child {
  9. border-top: 0;
  10. }
  11. }
  12. th {
  13. display: none;
  14. }
  15. }
  16. tr {
  17. display: block;
  18. td {
  19. display: block;
  20. text-align: right !important; // Important to overwrite order status inline styling
  21. &.order-actions {
  22. text-align: left !important; // This must always align left on handheld
  23. }
  24. &::before {
  25. content: attr(data-title) ': ';
  26. font-weight: 700;
  27. float: left;
  28. }
  29. &.product-remove,
  30. &.actions {
  31. &::before {
  32. display: none;
  33. }
  34. }
  35. }
  36. &:nth-child( 2n ) {
  37. td {
  38. background-color: rgba(0, 0, 0, 0.025);
  39. }
  40. }
  41. }
  42. }
  43. table.my_account_orders {
  44. tr {
  45. td {
  46. &.order-actions {
  47. text-align: left;
  48. &::before {
  49. display: none;
  50. }
  51. .button {
  52. float: none;
  53. margin: 0.125em 0.25em 0.125em 0;
  54. }
  55. }
  56. }
  57. }
  58. }
  59. /**
  60. * General layout
  61. */
  62. .col2-set {
  63. .col-1,
  64. .col-2 {
  65. float: none;
  66. width: 100%;
  67. }
  68. }
  69. /**
  70. * Products
  71. */
  72. .woocommerce-page {
  73. &, &[class*='columns-'] {
  74. ul.products {
  75. li.product {
  76. width: 48%;
  77. float: left;
  78. clear: both;
  79. margin: 0 0 2.992em;
  80. &:nth-child( 2n ) {
  81. float: right;
  82. clear: none !important; // This should never clear.
  83. }
  84. }
  85. }
  86. }
  87. }
  88. /**
  89. * Product Details
  90. */
  91. div.product,
  92. #content div.product {
  93. div.images,
  94. div.summary {
  95. float: none;
  96. width: 100%;
  97. }
  98. }
  99. /**
  100. * Cart
  101. */
  102. table.cart,
  103. #content table.cart {
  104. .product-thumbnail {
  105. display: none;
  106. }
  107. td.actions {
  108. text-align: left;
  109. .coupon {
  110. float: none;
  111. @include clearfix();
  112. padding-bottom: 0.5em;
  113. input,
  114. .button,
  115. .input-text {
  116. width: 48%;
  117. box-sizing: border-box;
  118. }
  119. .input-text + .button,
  120. .button.alt {
  121. float: right;
  122. }
  123. }
  124. .button {
  125. display: block;
  126. width: 100%;
  127. }
  128. }
  129. }
  130. .cart-collaterals {
  131. .cart_totals,
  132. .shipping_calculator,
  133. .cross-sells {
  134. width: 100%;
  135. float: none;
  136. text-align: left;
  137. }
  138. }
  139. /**
  140. * Checkout
  141. */
  142. .woocommerce-checkout {
  143. form.login {
  144. .form-row {
  145. width: 100%;
  146. float: none;
  147. }
  148. }
  149. }
  150. #payment {
  151. .terms {
  152. text-align: left;
  153. padding: 0;
  154. }
  155. #place_order {
  156. float: none;
  157. width: 100%;
  158. box-sizing: border-box;
  159. margin-bottom: 1em;
  160. }
  161. }
  162. /**
  163. * Account
  164. */
  165. .lost_reset_password {
  166. .form-row-first,
  167. .form-row-last {
  168. width: 100%;
  169. float: none;
  170. margin-right: 0;
  171. }
  172. }
  173. .woocommerce-account {
  174. .woocommerce-MyAccount-navigation,
  175. .woocommerce-MyAccount-content {
  176. float: none;
  177. width: 100%;
  178. }
  179. }
  180. }