diff --git a/index.html b/index.html
index bab954851d..d8d6d1b4ca 100644
--- a/index.html
+++ b/index.html
@@ -69,9 +69,9 @@ this repository contains the full copyright notices and license terms. -->
         <div id="main" class="container-fluid" style="padding: 0px;">
             <div class="row row-offcanvas row-offcanvas-left active"
                 style="height: calc(100vh - 50px - 1px - 20px); margin: 0px;">
-                <div class="col-xs-12 col-sm-3 col-lg-2 sidebar-offcanvas" id="menu" role="navigation"
+                <div class="col-xs-12 col-sm-4 col-lg-3 sidebar-offcanvas" id="menu" role="navigation"
                     style="overflow-y: auto; height: 100%;"></div>
-                <div class="col-xs-12 col-md-9 col-lg-10 main-offcanvas" style="overflow-y: auto; height: 100%;" id="tabs" role="tabpanel">
+                <div class="col-xs-12 col-sm-8 col-lg-9 main-offcanvas" style="overflow-y: auto; height: 100%;" id="tabs" role="tabpanel">
                     <div id="tabcontent" class="tab-content"></div>
                 </div>
             </div>
diff --git a/src/offcanvas.less b/src/offcanvas.less
index 40fd0e384e..be62fa96a0 100644
--- a/src/offcanvas.less
+++ b/src/offcanvas.less
@@ -60,17 +60,17 @@ body {
 
 
 @media (min-width: @screen-lg-min) {
-    .make-offcanvas(16.6666%);
-}
-
-@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
     .make-offcanvas(25%);
 }
 
-@media (min-width: @screen-xs-min) and (max-width: @screen-sm-max) {
+@media (max-width: @screen-md-max) {
+    .make-offcanvas(33.3333%);
+}
+
+@media (max-width: (@screen-sm-max)) {
     .make-offcanvas(50%);
 }
 
-@media (max-width: (@screen-xs-min - 1)) {
+@media (max-width: (@screen-xs-max)) {
     .make-offcanvas(100%);
 }