diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index ea4d38a9e67..748d5bfad45 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index d3232767714..8ce2b155d7a 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -61,9 +61,16 @@
                         <h3 class="modal-title">Mobile preview</h3>
                     </div>
                     <div class="modal-body">
-                        <div>
-                            <iframe id="mobile-viewport" class="oe_mobile_viewport" src="?mobile-preview=true"></iframe>
-                        </div>
+                        <iframe id="mobile-viewport" class="oe_mobile_viewport" src="?mobile-preview=true"></iframe>
+                        <script>
+                            var $o = $('<div style="width:50px; overflow:scroll;"><div style="width:100%;"></div></div>');
+                            $o.appendTo("body");
+                            var scrollSize = 50 - $o.find("div").innerWidth();
+                            $o.remove();
+
+                            $(".modal-body").css({'overflow': 'hidden', 'margin-right': '5px'});
+                            $(".oe_mobile_viewport").css({'width': (320 + scrollSize + 5) + 'px'});
+                        </script>
                     </div>
                 </div>
             </div>