diff --git a/core/modules/responsive_preview/css/responsive-preview.theme.css b/core/modules/responsive_preview/css/responsive-preview.theme.css
index 15291cc..915b518 100644
--- a/core/modules/responsive_preview/css/responsive-preview.theme.css
+++ b/core/modules/responsive_preview/css/responsive-preview.theme.css
@@ -104,12 +104,14 @@
  */
 .responsive-preview {
   box-shadow: 0 0 10px 0 black;
+}
+.responsive-preview .frame-container {
   opacity: 0;
   -moz-transition: all 450ms;
   -webkit-transition: all 450ms;
   transition: all 450ms;
 }
-.responsive-preview.active {
+.responsive-preview.active .frame-container {
   opacity: 1;
 }
 .responsive-preview .modal-background {
diff --git a/core/modules/responsive_preview/js/responsive-preview.js b/core/modules/responsive_preview/js/responsive-preview.js
index af7a18f..ab43308 100644
--- a/core/modules/responsive_preview/js/responsive-preview.js
+++ b/core/modules/responsive_preview/js/responsive-preview.js
@@ -555,7 +555,11 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
           .appendTo($frameContainer);
         // Insert the container into the DOM.
         this.$el
-          .css('top', offsets.top)
+          .css({
+            'top': offsets.top,
+            'right': offsets.right,
+            'left': offsets.left
+          })
           // Apend the frame container.
           .append($frameContainer)
           // Append the container to the body to initialize the iframe document.
@@ -581,7 +585,7 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
         // Get current (dynamic) state.
         var dimensions = this.model.get('dimensions');
         var isRotated = this.model.get('isRotated');
-        var viewportWidth = this.envModel.get('viewportWidth');
+        var viewportWidth = this.envModel.get('viewportWidth') - (offsets.left + offsets.right);
 
         // Calculate preview width & height. If the preview is rotated, swap width
         // and height.
@@ -606,9 +610,13 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
         this.$el.find('.control.orientation').toggleClass('rotated', isRotated);
 
         // Resize & reposition the iframe.
+        this.$el.css({
+          'top': offsets.top,
+          'right': offsets.right,
+          'left': offsets.left
+        });
         var position = {};
-        position[edge] = gutter; // Depends on text direction.
-        position.top = offsets.top;
+        position[edge] = (gutter > minGutter) ? gutter : minGutter; // Depends on text direction.
         $frame
           .css({
             width: width,
@@ -628,6 +636,9 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
           '@dpi': dimensions.dppx,
           '@orientation': (isRotated) ? this.strings.landscape : this.strings.portrait
         }));
+
+        // Update the positioning of the modal background.
+        this.$el.find('.modal-background').css(offsets);
       },
 
       /**
@@ -772,24 +783,6 @@ Drupal.responsivePreview = Drupal.responsivePreview || {
             });
         }
         return settings;
-      },
-
-      /**
-       * Gets the total displacement of given region.
-       *
-       * @param String region
-       *   Region name. Either "top" or "bottom".
-       *
-       * @return Number
-       *   The total displacement of given region in pixels.
-       */
-      _getDisplacement: function (region) {
-        var displacement = 0;
-        var lastDisplaced = $('[data-offset-' + region + ']');
-        if (lastDisplaced.length) {
-          displacement = parseInt(lastDisplaced.attr('data-offset-' + region), 10);
-        }
-        return displacement;
       }
     })
   }