diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/outside_in/css/outside_in.module.css
index 9e36037..afe3fcf 100644
--- a/core/modules/outside_in/css/outside_in.module.css
+++ b/core/modules/outside_in/css/outside_in.module.css
@@ -47,3 +47,14 @@
   width: 100%;
   z-index: -1;
 }
+
+@media all and (max-width: 460px) {
+  .ui-dialog.ui-dialog-offcanvas {
+    width: 100% !important;
+  }
+
+  .js-stop-scrolling {
+    height: 100%;
+    overflow-y: hidden;
+  }
+}
diff --git a/core/modules/outside_in/js/offcanvas.js b/core/modules/outside_in/js/offcanvas.js
index b3c4237..078a41b 100644
--- a/core/modules/outside_in/js/offcanvas.js
+++ b/core/modules/outside_in/js/offcanvas.js
@@ -11,6 +11,8 @@
 
   'use strict';
 
+  var minDisplaceWidth = 461;
+
   /**
    * The edge of the screen that the dialog should appear on.
    *
@@ -81,6 +83,9 @@
    *   The event triggered.
    */
   function bodyPadding(event) {
+    if ($('body').outerWidth() < minDisplaceWidth) {
+      return;
+    }
     var $element = event.data.$element;
     var $widget = $element.dialog('widget');
 
@@ -113,6 +118,7 @@
     },
     'dialog:beforecreate': function (event, dialog, $element, settings) {
       if ($element.is('#drupal-offcanvas')) {
+        $('body').addClass('js-stop-scrolling');
         // @see http://api.jqueryui.com/position/
         settings.position = {
           my: 'left top',
@@ -124,6 +130,7 @@
     },
     'dialog:beforeclose': function (event, dialog, $element) {
       if ($element.is('#drupal-offcanvas')) {
+        $('body').removeClass('js-stop-scrolling');
         $(document).off('.outsidein');
         $(window).off('.outsidein');
         $mainCanvasWrapper.css('padding-' + edge, 0);