[minor] sidebar in website not hidden in mobile

frappe/public/css/website.css

@@ -712,11 +712,6 @@ textarea {
 .sidebar-navbar-items a:visited {
   border-bottom: 0px;
 }
-@media (max-width: 767px) {
-  .visible-xs {
-    display: inline-block !important;
-  }
-}
 .more-block {
   padding-bottom: 30px;
 }
@@ -795,11 +790,29 @@ a.active {
   padding-top: 30px;
   padding-bottom: 50px;
 }
+.page-content.with-sidebar {
+  padding-left: 50px;
+}
 .your-account-info {
   margin-top: 30px;
 }
-.page-content.with-sidebar {
-  padding-left: 50px;
+@media (max-width: 767px) {
+  .visible-xs {
+    display: inline-block !important;
+  }
+  .sidebar-block {
+    width: 100%;
+  }
+  .sidebar-block .web-sidebar {
+    margin: 0px -15px;
+    padding: 0px 30px;
+    border-bottom: 1px solid #d1d8dd;
+  }
+  .page-content.with-sidebar {
+    width: 100%;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
 }
 @media screen and (max-width: 480px) {
   .page-content {

frappe/public/less/website.less

@@ -378,11 +378,6 @@ textarea {
 	}
 }
 
-@media (max-width: 767px) {
-	.visible-xs {
-		display: inline-block !important;
-	}
-}
 
 .more-block {
 	padding-bottom: 30px;
@@ -480,13 +475,36 @@ a.active {
 .sidebar-block, .page-content {
 	padding-top: 30px;
 	padding-bottom: 50px;
+	//width: 20%;
 }
+
+.page-content.with-sidebar {
+	padding-left: 50px;
+	//width: 80%;
+}
+
 .your-account-info {
 	margin-top: 30px;
 }
 
-.page-content.with-sidebar {
-	padding-left: 50px;
+@media (max-width: 767px) {
+	.visible-xs {
+		display: inline-block !important;
+	}
+	.sidebar-block {
+		width: 100%;
+
+		.web-sidebar {
+			margin: 0px -15px;
+			padding: 0px 30px;
+			border-bottom: 1px solid @border-color;
+		}
+	}
+	.page-content.with-sidebar {
+		width: 100%;
+		padding-left: 20px;
+		padding-right: 20px;
+	}
 }
 
 @media screen and (max-width: 480px) {

frappe/templates/web.html

@@ -8,7 +8,7 @@
 		data-doctype="{{ doctype }}"{% endif %}>
 	<div class="row {% if show_sidebar %}vert-line{% endif %}">
 		{% if show_sidebar %}
-			<div class="col-sm-3 sidebar-block hidden-xs">
+			<div class="col-sm-3 sidebar-block">
 				{% include "templates/includes/web_sidebar.html" %}
 			</div>
 		{% endif %}
@@ -48,6 +48,7 @@
 					{%- block page_content -%}{%- endblock -%}
 				</div>
 			</div>
+			<!-- sidebar ends -->
 		</div>
 	</div>
 </div>