Fix examples responsive issues

3 files changed, 11 insertions, 3 deletions

diff --git a/src/buttons.less b/src/buttons.less
index 3547e11..df38742 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -153,6 +153,12 @@
     }
   }
 
+  &.is-scrollable {
+    flex-wrap: nowrap;
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
   &.btn-group-block {
     display: flex;
   }
diff --git a/src/layout.less b/src/layout.less
index e32897a..263ed69 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -22,6 +22,7 @@
 // Responsive grid system
 .columns {
   display: flex;
+  flex-wrap: wrap;
   margin-left: -@layout-gutter;
   margin-right: -@layout-gutter;
 
@@ -34,8 +35,9 @@
       padding-right: 0;
     }
   }
-  &.col-multiline {
-    flex-wrap: wrap;
+  &.col-oneline {
+    flex-wrap: nowrap;
+    overflow-x: auto;
   }
 }
 .column {
diff --git a/src/navigation.less b/src/navigation.less
index 6cf46cf..503ca72 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -46,7 +46,7 @@
       border-bottom: .2rem solid transparent;
       color: @body-font-color;
       display: block;
-      padding: .5rem 1.5rem;
+      padding: .5rem 1.2rem;
       text-decoration: none;
       &:focus,
       &:hover {