wrap content for smallest mobile sizes for no overflow

Author: Colinh84

assets/css/directives/challenge-tile.scss

@@ -410,7 +410,7 @@ challenge-tile .challenge.list-view {
   margin-bottom: 10px;
   padding: 20px 0;
   padding-left: 5px;
-  height: 110px;
+  min-height: 110px;
   border: 1px solid #E0E0E0;
   border-radius: 6px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
@@ -612,7 +612,8 @@ challenge-tile .challenge.list-view {
   .completed-challenge {
     width: 100%;
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
+    overflow: hidden;
     header {
       flex: 2;
     }

assets/css/directives/dev-challenge-user-place.scss

@@ -109,8 +109,7 @@ dev-challenge-user-place {
       text-align: center;
       background-color: #F6F6F6;
       @media only screen and (max-width: 767px) {
-        min-width: 50px;
-        width: 50px;
+        min-width: 84px;
         margin-left: 5px;
       }