fix: make sure buttons wrap on mobile

wmcadigital · Oct 9, 2020 · 05c7f87 · 05c7f87
1 parent 87a0c38
commit 05c7f87
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/src/wmcads/components/button/_button.scss b/src/wmcads/components/button/_button.scss
@@ -19,6 +19,9 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
+  @media screen and (max-width: $breakpoint-sm) {
+    white-space: normal;
+  }
 
   &:hover {
     background-color: get-color(primary, 30, dark);

diff --git a/src/www/pages/components/buttons/index.njk b/src/www/pages/components/buttons/index.njk
@@ -74,6 +74,11 @@
       text: "Call to action icon disabled button",
       iconRight: "general-icon-chevron-right",
       disabled: true
+    }),
+    cta({
+      text: "Long Call to action icon button Lorem ipsum dolor sit amet",
+      iconRight: "general-icon-chevron-right",
+      disabled: false
     })
   ])
 }}