From f68487cae109776daaca7715ecd166b02bfadc7f Mon Sep 17 00:00:00 2001
From: appleJax <appleJax@users.noreply.github.com>
Date: Sat, 18 Feb 2017 19:54:51 -0800
Subject: [PATCH] Make start/interests responsive

---
 app/styles/components/categories-list.scss | 4 +++-
 app/styles/components/category-item.scss   | 8 +++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/styles/components/categories-list.scss b/app/styles/components/categories-list.scss
index 3f601b306..6046b2987 100644
--- a/app/styles/components/categories-list.scss
+++ b/app/styles/components/categories-list.scss
@@ -1,5 +1,7 @@
 .categories-list {
-  flex: 1;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   margin-bottom: 2em;
   width: 100%;
 }
diff --git a/app/styles/components/category-item.scss b/app/styles/components/category-item.scss
index 9dabc7d50..ffd01ca60 100644
--- a/app/styles/components/category-item.scss
+++ b/app/styles/components/category-item.scss
@@ -1,8 +1,10 @@
 .category-item {
-  @include omega(5n);
-  @include span-columns(2.4);
-
   text-align: center;
+  width: 20%;
+  @include media($lg-screen) { width: 25%; }
+  @include media($md-screen) { width: 33%; }
+  @include media($sm-screen) { width: 50%; }
+  @include media($xs-screen) { width: 100%; }
 
   button {
     text-align: left;