diff --git a/addons/web/static/src/js/services/config.js b/addons/web/static/src/js/services/config.js
index d05a263ef4e..946f7d39f55 100644
--- a/addons/web/static/src/js/services/config.js
+++ b/addons/web/static/src/js/services/config.js
@@ -41,22 +41,23 @@ var config = {
         /**
          * A frequent use case is to have a different render in 'mobile' mode,
          * meaning when the screen is small.  This flag (boolean) is true when
-         * the size is XXS or XS. It is also updated dynamically.
+         * the size is XS/VSM/SM. It is also updated dynamically.
          *
          * @type Boolean
          */
         isMobile: null,
         /**
-         * Mapping between the numbers 0,1,2,3,4,5 and some descriptions
+         * Mapping between the numbers 0,1,2,3,4,5,6 and some descriptions
          */
-        SIZES: { XXS: 0, XS: 1, SM: 2, MD: 3, LG: 4, XL: 5 },
+        SIZES: { XS: 0, VSM: 1, SM: 2, MD: 3, LG: 4, XL: 5, XXL: 6 },
     },
 };
 
 
 var medias = [
     window.matchMedia('(max-width: 474px)'),
-    window.matchMedia('(min-width: 475px) and (max-width: 767px)'),
+    window.matchMedia('(min-width: 475px) and (max-width: 575px)'),
+    window.matchMedia('(min-width: 576px) and (max-width: 767px)'),
     window.matchMedia('(min-width: 768px) and (max-width: 991px)'),
     window.matchMedia('(min-width: 992px) and (max-width: 1199px)'),
     window.matchMedia('(min-width: 1200px) and (max-width: 1533px)'),
@@ -69,8 +70,8 @@ var medias = [
  * @returns {integer} a number between 0 and 5, included
  */
 function _getSizeClass() {
-    for(var i = 0 ; i < medias.length ; i++) {
-        if(medias[i].matches) {
+    for (var i = 0 ; i < medias.length ; i++) {
+        if (medias[i].matches) {
             return i;
         }
     }
@@ -83,7 +84,7 @@ function _updateSizeProps() {
     var sc = _getSizeClass();
     if (sc !== config.device.size_class) {
         config.device.size_class = sc;
-        config.device.isMobile = config.device.size_class <= config.device.SIZES.SM;
+        config.device.isMobile = config.device.size_class <= config.device.SIZES.MD;
     }
 }
 
diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index 1422392db41..a96742bd0e2 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -35,7 +35,7 @@ var FormRenderer = BasicRenderer.extend({
      * @override
      */
     start: function () {
-        if (config.device.size_class <= config.device.SIZES.XXS) {
+        if (config.device.size_class <= config.device.SIZES.XS) {
             this.$el.addClass('o_xxs_form_view');
         }
         return this._super.apply(this, arguments);
diff --git a/addons/web/static/src/js/views/graph/graph_renderer.js b/addons/web/static/src/js/views/graph/graph_renderer.js
index 1fbd6572a9a..686bbaee842 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -243,7 +243,7 @@ return AbstractRenderer.extend({
 
         svg.transition().duration(100);
 
-        var legend_right = config.device.size_class > config.device.SIZES.XS;
+        var legend_right = config.device.size_class > config.device.SIZES.VSM;
 
         var chart = nv.models.pieChart().labelType('percent');
         chart.options({
diff --git a/addons/web/static/src/js/views/search/search_view.js b/addons/web/static/src/js/views/search/search_view.js
index 9e1f70fec22..2bac31ed27f 100644
--- a/addons/web/static/src/js/views/search/search_view.js
+++ b/addons/web/static/src/js/views/search/search_view.js
@@ -535,7 +535,7 @@ var SearchView = Widget.extend({
      * puts the focus on the search input
      */
     _focusInput: function () {
-        if (!config.device.touch && config.device.size_class >= config.device.SIZES.SM) {
+        if (!config.device.touch && config.device.size_class >= config.device.SIZES.MD) {
             this.$('input').focus();
         }
     },
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index 0d5faa0328f..ffb0f6198d5 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -3225,7 +3225,7 @@ QUnit.module('basic_fields', {
             res_id: 1,
             config: {
                 device: {
-                    size_class: config.device.SIZES.XS,
+                    size_class: config.device.SIZES.VSM,
                 },
             },
         });
@@ -3269,7 +3269,7 @@ QUnit.module('basic_fields', {
             arch: '<tree editable="bottom"><field name="foo"  widget="phone"/></tree>',
             config: {
                 device: {
-                    size_class: config.device.SIZES.XS,
+                    size_class: config.device.SIZES.VSM,
                 },
             },
         });
@@ -3325,7 +3325,7 @@ QUnit.module('basic_fields', {
             res_id: 1,
             config: {
                 device: {
-                    size_class: config.device.SIZES.SM,
+                    size_class: config.device.SIZES.MD,
                 },
             },
         });
@@ -3364,7 +3364,7 @@ QUnit.module('basic_fields', {
             arch: '<tree editable="bottom"><field name="foo"  widget="phone"/></tree>',
             config: {
                 device: {
-                    size_class: config.device.SIZES.SM,
+                    size_class: config.device.SIZES.MD,
                 },
             },
         });
@@ -3417,7 +3417,7 @@ QUnit.module('basic_fields', {
             },
             config: {
                 device: {
-                    size_class: config.device.SIZES.XS,
+                    size_class: config.device.SIZES.VSM,
                 },
             },
         });
diff --git a/addons/web/static/tests/helpers/test_utils.js b/addons/web/static/tests/helpers/test_utils.js
index 0aa9f7acaad..c460bf95673 100644
--- a/addons/web/static/tests/helpers/test_utils.js
+++ b/addons/web/static/tests/helpers/test_utils.js
@@ -342,7 +342,7 @@ function addMockEnvironment(widget, params) {
         initialConfig.device = _.clone(config.device);
         if ('device' in params.config) {
             _.extend(config.device, params.config.device);
-            config.device.isMobile = config.device.size_class <= config.device.SIZES.XS;
+            config.device.isMobile = config.device.size_class <= config.device.SIZES.VSM;
         }
         if ('debug' in params.config) {
             config.debug = params.config.debug;
diff --git a/addons/website_quote/static/src/js/website_quotation.js b/addons/website_quote/static/src/js/website_quotation.js
index 5c78c9d1363..214345b9dae 100644
--- a/addons/website_quote/static/src/js/website_quotation.js
+++ b/addons/website_quote/static/src/js/website_quotation.js
@@ -122,7 +122,7 @@ if(!$('.o_website_quote').length) {
             position: "",
             width: "",
         });
-        if (config.device.size_class >= config.device.SIZES.MD) {
+        if (config.device.size_class >= config.device.SIZES.LG) {
             $bs_sidebar.css({
                 position: "fixed",
                 width: $bs_sidebar.outerWidth(),
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index 3f325be94ec..53e98566944 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -477,7 +477,7 @@ odoo.define('website_sale.website_sale', function (require) {
     });
 
     core.bus.on('resize', this, function() {
-        if (config.device.size_class === config.device.SIZES.LG) {
+        if (config.device.size_class === config.device.SIZES.XL) {
             $('.toggle_summary_div').addClass('visible-lg');
         }
     });