diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index fa5dbd9c4b6..206b92b2ad9 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -250,6 +250,79 @@
     height: 760px;
   }
 }
+/* ---- Cart ---- */
+.oe_cart a span.visible-xs-inline, #modal_optional_products a span.visible-xs-inline {
+  display: none !important;
+}
+
+.oe_cart a span.hidden-xs, #modal_optional_products a span.hidden-xs {
+  display: inline !important;
+}
+
+.oe_cart table td:first-child {
+  min-width: 76px;
+}
+
+@media (max-width: 992px) {
+  #modal_optional_products table:last-child td:last-child {
+    overflow: hidden;
+  }
+  #modal_optional_products table:last-child td:nth-child(2) {
+    width: 50%;
+  }
+  #modal_optional_products table:last-child td:nth-child(3) {
+    width: 20%;
+  }
+  #modal_optional_products table:last-child td:last-child, #modal_optional_products table:last-child td:nth-last-child(2) {
+    width: 15%;
+  }
+}
+@media (max-width: 500px) {
+  .oe_website_sale .oe_website_spinner {
+    margin: auto;
+  }
+
+  .oe_cart table, #modal_optional_products table {
+    display: inline-block;
+  }
+  .oe_cart table thead, #modal_optional_products table thead {
+    display: none;
+  }
+  .oe_cart table tbody, .oe_cart table tr, .oe_cart table td, #modal_optional_products table tbody, #modal_optional_products table tr, #modal_optional_products table td {
+    float: left;
+    width: 100% !important;
+    display: inline-block;
+  }
+  .oe_cart table td:first-child, #modal_optional_products table td:first-child {
+    display: none;
+  }
+  .oe_cart table td:nth-child(2), #modal_optional_products table td:nth-child(2) {
+    border-top-style: double;
+    border-top-width: 6px;
+  }
+  .oe_cart table td:last-child, #modal_optional_products table td:last-child {
+    margin-bottom: 16px;
+  }
+  .oe_cart table:last-child tr:last-child td:last-child, #modal_optional_products table:last-child tr:last-child td:last-child {
+    margin-bottom: 0;
+  }
+  .oe_cart table td:last-child, .oe_cart table td:nth-last-child(2), #modal_optional_products table td:last-child, #modal_optional_products table td:nth-last-child(2) {
+    width: 50% !important;
+    height: 46px;
+    text-align: center;
+  }
+
+  #modal_optional_products table:last-child td:nth-child(3) > div {
+    float: none !important;
+  }
+
+  .oe_cart a span.hidden-xs, #modal_optional_products a span.hidden-xs {
+    display: none !important;
+  }
+  .oe_cart a span.visible-xs-inline, #modal_optional_products a span.visible-xs-inline {
+    display: inline !important;
+  }
+}
 /* ---- Product list style ---- */
 @media (min-width: 400px) {
   .oe_product.oe_list {
diff --git a/addons/website_sale/static/src/css/website_sale.sass b/addons/website_sale/static/src/css/website_sale.sass
index 5bb4e9c8f5f..460ea7366b2 100644
--- a/addons/website_sale/static/src/css/website_sale.sass
+++ b/addons/website_sale/static/src/css/website_sale.sass
@@ -215,6 +215,58 @@
         .oe-height-8
             height: 760px
 
+/* ---- Cart ---- */
+.oe_cart, #modal_optional_products
+    a span.visible-xs-inline
+        display: none !important
+.oe_cart, #modal_optional_products
+    a span.hidden-xs
+        display: inline !important
+
+.oe_cart table td:first-child
+    min-width: 76px
+
+@media (max-width: 992px)
+    #modal_optional_products table:last-child
+        td:last-child
+            overflow: hidden
+        td:nth-child(2)
+            width: 50%
+        td:nth-child(3)
+            width: 20%
+        td:last-child, td:nth-last-child(2)
+            width: 15%
+@media (max-width: 500px)
+    .oe_website_sale .oe_website_spinner
+        margin: auto
+    .oe_cart table, #modal_optional_products table
+        display: inline-block
+        thead
+            display: none
+        tbody, tr, td
+            float: left
+            width: 100% !important
+            display: inline-block
+        td:first-child
+            display: none
+        td:nth-child(2)
+            border-top-style: double
+            border-top-width: 6px
+        td:last-child
+            margin-bottom: 16px
+        &:last-child tr:last-child td:last-child
+            margin-bottom: 0
+        td:last-child, td:nth-last-child(2)
+            width: 50% !important
+            height: 46px
+            text-align: center
+    #modal_optional_products table:last-child td:nth-child(3) > div
+        float: none !important
+    .oe_cart a, #modal_optional_products a
+        span.hidden-xs
+            display: none !important
+        span.visible-xs-inline
+            display: inline !important
 /* ---- Product list style ---- */
 
 @media (min-width: 400px)
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index eb7c50f038f..a6362f562fd 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -721,7 +721,7 @@
                   <t t-call="website_sale.total"/>
                   <div class="clearfix"/>
 
-                  <a t-if="not optional_products and website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32" href="/shop/checkout">Process Checkout <span class="fa fa-long-arrow-right"/></a>
+                  <a t-if="not optional_products and website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32" href="/shop/checkout"><span class="hidden-xs">Process Checkout</span><span class="visible-xs-inline">Checkout</span> <span class="fa fa-long-arrow-right"/></a>
 
                   <div class="oe_structure"/>
               </div>
@@ -804,7 +804,7 @@
 
 <template id="continue_shopping" inherit_id="website_sale.cart" customize_show="True" name="Continue Shopping Button">
   <xpath expr="//a[@href='/shop/checkout']" position="before">
-    <a href="/shop" class="btn btn-default mb32"><span class="fa fa-long-arrow-left"/> Continue Shopping</a>
+    <a href="/shop" class="btn btn-default mb32"><span class="fa fa-long-arrow-left"/> <span class="hidden-xs">Continue Shopping</span><span class="visible-xs-inline">Continue</span></a>
   </xpath>
 </template>
 
diff --git a/addons/website_sale_options/views/templates.xml b/addons/website_sale_options/views/templates.xml
index 2963666cc8c..df4e47f7d63 100644
--- a/addons/website_sale_options/views/templates.xml
+++ b/addons/website_sale_options/views/templates.xml
@@ -61,7 +61,7 @@
                       "widget": "monetary",
                       "from_currency": "website.currency_id",
                       "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
-                   }'/><br/>
+                   }'/>
                   <span class="oe_price" style="white-space: nowrap;"
                     t-field="product.price"
                     t-field-options='{
@@ -138,8 +138,8 @@
           </table>
         </div>
         <div class="modal-footer">
-          <a class="btn btn-default a-submit js_goto_shop"><i class="fa fa-chevron-left"></i> Continue shopping</a>
-          <a class="btn btn-primary pull-right a-submit"><i class="fa fa-shopping-cart fa-fw"></i> Proceed to checkout</a>
+          <a class="btn btn-default a-submit js_goto_shop"><i class="fa fa-chevron-left"></i> <span class="hidden-xs">Continue Shopping</span><span class="visible-xs-inline">Continue</span></a>
+          <a class="btn btn-primary pull-right a-submit"><i class="fa fa-shopping-cart fa-fw"></i> <span class="hidden-xs">Proceed to checkout</span><span class="visible-xs-inline">Checkout</span></a>
         </div>
       </div>
     </div>