Issue 1047: Update dashboard mobile CSS styling

Author: Colinh84

assets/css/directives/challenge-tile.scss

@@ -281,12 +281,6 @@ challenge-tile .challenge.tile-view {
   }
 
 
-  @media only screen and (max-width: 768px) {
-    .active-challenge {
-      height: auto;
-      margin: auto;
-    }
-  }
   .completed-challenge {
     height: 390px;
     display: flex;
@@ -378,6 +372,13 @@ challenge-tile .challenge.tile-view {
     }
   }
 
+  @media only screen and (max-width: 768px) {
+    .active-challenge, .completed-challenge {
+      height: auto;
+      margin: auto;
+    }
+  }
+
   .past-design-details {
     img {
       height: 200px;

assets/css/my-challenges/my-challenges.scss

@@ -179,11 +179,9 @@
             margin-bottom: 13px;
             @media only screen and (max-width: 767px) {
               display: inline-block;
-              margin-left: 15px;
-
-              &:first-child {
-                margin-left: 0;
-              }
+              margin-left: auto;
+              margin-right: auto;
+              margin-bottom: 15px;
             }
             @media only screen and (min-width: 768px) {
               &:nth-child(2n + 1) {

assets/css/my-dashboard/my-challenges.scss

@@ -171,10 +171,8 @@
         margin-bottom: 15px;
         @media only screen and (max-width: 767px) {
           display: inline-block;
-
-          &:first-child {
-            margin-left: 0;
-          }
+          margin-left: auto;
+          margin-right: auto;
         }
         @media only screen and (min-width: 768px) {
           &:nth-child(2n + 1) {