diff --git a/frappe/docs/current/api/utils/frappe.utils.html b/frappe/docs/current/api/utils/frappe.utils.html
index 468917e298..4a8c04ccec 100644
--- a/frappe/docs/current/api/utils/frappe.utils.html
+++ b/frappe/docs/current/api/utils/frappe.utils.html
@@ -300,7 +300,7 @@
 		frappe.utils.<b>get_formatted_email</b>
         <i class="text-muted">(user)</i>
     </p>
-	<div class="docs-attr-desc"><p>get email id of user formatted as: John Doe <a href="&#x6d;&#x61;&#x69;&#x6c;&#116;&#x6f;&#x3a;&#x6a;&#x6f;&#104;&#x6e;&#100;&#111;&#101;&#64;&#101;&#x78;&#97;&#109;p&#x6c;e&#x2e;&#99;&#111;m">&#x6a;&#x6f;&#104;&#x6e;&#100;&#111;&#101;&#64;&#101;&#x78;&#97;&#109;p&#x6c;e&#x2e;&#99;&#111;m</a></p>
+	<div class="docs-attr-desc"><p>get email id of user formatted as: John Doe <a href="m&#97;i&#108;&#x74;&#111;&#x3a;j&#111;&#x68;&#110;&#x64;&#x6f;&#x65;&#x40;e&#x78;&#97;&#109;&#x70;&#x6c;&#101;&#46;&#x63;&#111;&#x6d;">j&#111;&#x68;&#110;&#x64;&#x6f;&#x65;&#x40;e&#x78;&#97;&#109;&#x70;&#x6c;&#101;&#46;&#x63;&#111;&#x6d;</a></p>
 </div>
 	<br>
 
diff --git a/frappe/public/css/docs.css b/frappe/public/css/docs.css
index e2d790d505..24c45c7d74 100644
--- a/frappe/public/css/docs.css
+++ b/frappe/public/css/docs.css
@@ -588,3 +588,11 @@ a.edit:visited {
   color: #454e57;
   font-size: 16px;
 }
+@media (max-width: 767px) {
+  .offcanvas-container,
+  .offcanvas,
+  .offcanvas-main-section {
+    position: relative;
+    width: 50%;
+  }
+}
diff --git a/frappe/public/images/background.png b/frappe/public/images/background.png
new file mode 100644
index 0000000000..45b91e94ea
Binary files /dev/null and b/frappe/public/images/background.png differ
diff --git a/frappe/public/images/smiley.png b/frappe/public/images/smiley.png
new file mode 100644
index 0000000000..80aaf48f35
Binary files /dev/null and b/frappe/public/images/smiley.png differ
diff --git a/frappe/public/images/up.png b/frappe/public/images/up.png
new file mode 100644
index 0000000000..949027e61e
Binary files /dev/null and b/frappe/public/images/up.png differ
diff --git a/frappe/public/less/docs.less b/frappe/public/less/docs.less
index 98f8e7019c..af97c38370 100644
--- a/frappe/public/less/docs.less
+++ b/frappe/public/less/docs.less
@@ -346,3 +346,12 @@ a.edit, a.edit:hover, a.edit:focus, a.edit:visited {
  color:#454e57;
  font-size:16px;
 }
+
+@media (max-width: 767px) {
+  .offcanvas-container,
+  .offcanvas,
+  .offcanvas-main-section {
+    position: relative;
+   width:50%;
+  }
+}
diff --git a/frappe/utils/setup_docs.py b/frappe/utils/setup_docs.py
index 7c2f7a0d94..077438e2e5 100644
--- a/frappe/utils/setup_docs.py
+++ b/frappe/utils/setup_docs.py
@@ -372,7 +372,10 @@ class setup_docs(object):
 			"css/octicons": "css/octicons",
 			# always overwrite octicons.css to fix the path
 			"css/octicons/octicons.css": "css/octicons/octicons.css",
-			"images/frappe-bird-grey.svg": "img/frappe-bird-grey.svg"
+			"images/frappe-bird-grey.svg": "img/frappe-bird-grey.svg",
+   "images/background.png": "img/background.png",
+   "images/smiley.png": "img/smiley.png",
+   "images/up.png": "img/up.png"
 		}
 
 		for source, target in copy_files.iteritems():